根據一天中的小時更改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>