用jQuery根據一天中的小時數更改div

Question

任何想對此進行刺探的人，我都可以真正使用你的幫助！

我有幾行php，根據星期幾切換出一個js文件。 在每個js文件中，我需要它根據小時來隱藏/顯示div。由於某種原因，這是行不通的。有任何想法嗎？

$(document).ready(function() { 

//initialize on-air functions for Sunday... Yay it's Jesus day! 
    var d = new Date(); 
    var currentHour = d.getHours(); //0-23 

    if (currentHour > 5 && currentHour < 6) 
    { 
     $('#no_onair').hide(); 
     $('#newdimesion_onair').show(); 


     } 
     else if (currentHour > 6 && currentHour < 7) 
    { 
     $('#no_onair').hide(); 
     $('#artfthesong_onair').show(); 


     } 
     else if (currentHour > 8 && currentHour < 10) 
    { 
     $('#no_onair').hide(); 
     $('#thejazzshow_onair').show(); 


     } 

    else if (currentHour > 11 && currentHour < 13) 
    { 
     $('#no_onair').hide(); 
     $('#rob_onair').show(); 


     } 


     else if (currentHour > 13 && currentHour < 14) 
    { 
     $('#no_onair').hide(); 
     $('#nick_onair').show(); 


     } 

     else if (currentHour > 16 && currentHour < 18) 
    { 
     $('#no_onair').hide(); 
     $('#stadler_onair').show(); 



     } 
    else { 
     $('#no_onair').show(); 
     } 

setTimeout(function() { 
    $('#fixed_onair').addClass('animated fadeInDown'); 
    $('#fixed_onair').show(); 
}, 5100); 

}); 

Answer 1

我不知道你爲什麼要用php來交換JS文件。最簡單的方法是將CSS類分配給div，然後使用jQuery來隱藏/顯示。

下面是一個可以工作的代碼片段。這將顯示負載上正確的div。如果您想爲網站上已有的人動態地交換它們，您可以設置一個計時器來檢查每個xx分鐘並運行相同的代碼。如果需要的話，每個循環都可能被優化，但似乎沒有那麼多div。無論如何，比使用PHP來注入腳本要好得多。

<div class="all d0 h1 h2 h3 h4" style="display:none;"> Sunday 1, 2, 3, 4 </div> 
 
<div class="all d0 h5 h6 h7 h18" style="display:none;"> Sunday 5, 6, 7, 18 </div> 
 
<div class="all d1 h1 h2 h3 h4" style="display:none;"> Monday 1, 2, 3, 4 </div> 
 
<div class="all d1 h5 h6 h7 h8" style="display:none;"> Monday 5, 6, 7, 8 </div> 
 

 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 

 
<script> 
 
    $(document).ready(function() { 
 
     $("div.all").hide(); 
 
     var date = new Date(); 
 
     var d = date.getDay(); 
 
     var h = date.getHours(); 
 
     console.log('searching for ' + d + ' and ' + h); 
 
     $("div.all").each(function() { 
 
      if ($(this).hasClass("d" + d) && $(this).hasClass("h"+h)) { 
 
       $(this).show(); 
 
      } 
 
     }); 
 
    }); 
 
</script>