изменить div в зависимости от часа дня с jQuery

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>