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

时间:2014-12-07 21:28:19

标签: javascript jquery html

任何想要对此进行刺杀的人,我都可以真正使用你的帮助!

我有几行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);

});

1 个答案:

答案 0 :(得分:2)

我不知道你为什么要使用php来交换JS文件。最简单的方法是将div类分配给div,然后使用jQuery隐藏/显示。

以下是可行的代码段。这将在加载时显示正确的div。如果要为站点上已有的人动态交换它们,可以设置一个计时器,每隔xx分钟检查一次并运行相同的代码。如果需要,可以优化每个循环,但似乎没有那么多div。无论哪种方式,都比使用PHP注入脚本要好得多。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;