根据一天中的小时更改jQuery的div

Question

Anyone who wants to take a stab at this, I could really use your help!

I have a couple lines of php, that switches out a js file depending on the day of the week. in each js file, I need it to hide/show a div depending on the hour. For some reason this isn't working. any ideas?

$(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

i am not sure why you would use php to swap JS files. The easiest way to do this is to assign CSS classes to your divs and then just use jQuery to hide/show.

Below is a snippet that works. This will display the correct div on load. If you want to swap them out dynamically for people already on the site you can set a timer that checks every xx minutes and run the same code. The each loop can probably be optimized if need be, but does not seem you have that many divs. either way, much better than using PHP to inject scripts.

 <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>