Question

我有一个＆＃34;部分＆＃34;带有背景图片。

<section id="header" class="color-light text-center" data-type="background" data-speed="10">

这是CSS

#header {
   background: url('sunrise.jpg') 50% 0 no-repeat fixed;
   height: 800px;
   margin: 0;
   overflow: hidden;
   color: #f4f4f4;
 }

使用这个javascript我检查一天的时间...

      var d = new Date();
      var n = d.getHours();
      if (n > 19 || n < 6)
        $("#header").className = "night";
      else if (n > 16 && n < 19)
        $("#header").className = "sunset";
      else
        $("#header").className = "day";

我在css文件中有这个....但不知道我是否需要使用它

/* backgrounds */
.day { background: url('sunrise.jpg') 50% 0 no-repeat fixed; }
.sunset { background: url('sunset.jpg') 50% 0 no-repeat fixed; }
.night { background: url('night.jpg')50% 0 no-repeat fixed; }

我不确定我是否错过了使用jquery更改#header的方法，并应用更新的背景值。

Answer 1

className不是您可以直接通过jQuery对象访问的属性。要更改jQuery对象的属性，可以使用.prop()，但在这种情况下，因为它是一个类，您只需使用.addClass()，.removeClass()和{{1 }}。见这里：http://api.jquery.com/category/manipulation/class-attribute/

如果代码没有其他问题，这应该有效：

.toggleClass()

Answer 2

这应该是你需要做的所有工作

var d = new Date();
      var n = d.getHours();
      if (n > 19 || n < 6)
        $("#header").css("background", "url('night.jpg')");
      else if (n > 16 && n < 19)
        $("#header").css("background", "url('sunset.jpg')");
      else
        $("#header").css("background", "url('day.jpg')");

根据时间更改背景图片

2 个答案: