Изменение фонового изображения на основе времени суток

Question

У меня есть раздел, который имеет фоновое изображение с ним.

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

I Я не уверен, что мне не удалось изменить #header с помощью jquery и применить обновленное значение фона.

Answer 1

Это должно быть все, что вам нужно сделать

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')"); 

Answer 2

className не является собственностью, к которой вы можете получить доступ непосредственно через объект jQuery. Чтобы изменить свойство объекта jQuery, вы можете использовать .prop(), но в этом случае, потому что это класс, вы можете просто использовать .addClass(), .removeClass() и .toggleClass(). Смотрите здесь: http://api.jquery.com/category/manipulation/class-attribute/

При условии, нет никаких других проблем с кодом, это должно работать:

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