jquery更改图像路径

我不得不使用一个带有图像的div来覆盖页面，因为在不同的浏览器中，背景会延伸到整个页面

我想做的是让这个图像根据一天中的时间而改变。当我在CSS中使用更传统的背景图像属性时，它工作得很好，但是我在转换它以更改图像的src属性时遇到了问题

图像的id为#bg。我可能犯了一个语法错误，但任何帮助都会很好，谢谢

$('document').ready(function(){

 var hours = getDayTime(new Date().getHours());

if (hours > 20 || hours < 5) {
    $('#page-background > img').prop('src', 'backgrounds/night.jpg')
}    

else if (hours > 17) {
    $('#page-background > img').prop('src', 'backgrounds/dusk.jpg')
}    

else if (hours > 8) {
    $('#page-background > img').prop('src', 'backgrounds/day.jpg')
}

else { 
    $('#page-background > img').prop('src', 'backgrounds/dawn.jpg')
}
});


<div id="page-background"><img src="backgrounds/day.jpg" width="100%" height="100%" alt="" id="bg" /></div>

$（'document'）.ready（函数（）{
var hours=getDaily（新日期（）.getHours（））；
如果（小时数>20 | |小时数<5）{
$（'#page background>img'）.prop（'src'，'backgrounds/night.jpg'））
}    
否则，如果（小时数>17）{
$（'#page background>img'）.prop（'src'，'backgrounds/dash.jpg'））
}    
否则，如果（小时数>8）{
$（'#page background>img'）.prop（'src'，'backgrounds/day.jpg'））
}
否则{
$（'#page background>img'）.prop（'src'，'backgrounds/dawn.jpg'））
}
});

您可能应该使用

$('#bg')

而不是

$('#bg img')

---

在第二种情况下，您将选择元素#bg下的所有IMG元素。

您可能应该使用

$('#bg')

而不是

$('#bg img')

在第二种情况下，选择元素#bg下的所有IMG元素

应该是

$('#bg').prop('src', 'backgrounds/night.jpg')

由于您已指定图像的

id

，因此无需包含

img

。从jQuery 1.6开始，它优先于

attr（）

应该是

$('#bg').prop('src', 'backgrounds/night.jpg')

由于您已指定图像的

id

，因此无需包含

img

。从jQuery 1.6开始，如果它是：

<img src="someimage.jpg" id="bg" />

如果是：

<img src="someimage.jpg" id="bg" />

---

以下是针对您的问题的另一个更实用的解决方案：

$("#bg").attr("src", function(i, value) {
    var src = "backgrounds/";

    if (hours > 20 || hours < 5) src += "night.jpg";
    else if (hours > 17) src += "dusk.jpg";
    else if (hours > 8) src += "day.jpg";
    else src += "dawn.jpg";

    return src;
});

$（“#bg”）.attr（“src”，函数（i，值）{
var src=“backgrounds/”；
如果（小时数>20 | |小时数<5）src+=“night.jpg”；
如果（小时数>17）src+=“黄昏.jpg”；
如果（小时数>8）src+=“day.jpg”；
else src+=“dawn.jpg”；
返回src；
});

---

是的，您必须使用

#bg

选择器，因为这是图像本身。

这里有另一个更实用的解决方案：

$("#bg").attr("src", function(i, value) {
    var src = "backgrounds/";

    if (hours > 20 || hours < 5) src += "night.jpg";
    else if (hours > 17) src += "dusk.jpg";
    else if (hours > 8) src += "day.jpg";
    else src += "dawn.jpg";

    return src;
});

$('#bg').attr('src', function() {
    var src = 'backgrounds/dawn.jpg';
    if (hours > 20 || hours < 5) {
        src = 'backgrounds/night.jpg';
    } else if (hours > 17) {
        src = 'backgrounds/dusk.jpg';
    } else if (hours > 8) {
        src = 'backgrounds/day.jpg';
    }
    return src;
})

$（“#bg”）.attr（“src”，函数（i，值）{
var src=“backgrounds/”；
如果（小时数>20 | |小时数<5）src+=“night.jpg”；
如果（小时数>17）src+=“黄昏.jpg”；
如果（小时数>8）src+=“day.jpg”；
else src+=“dawn.jpg”；
返回src；
});

是的，您必须使用

#bg

选择器，因为这是图像本身。

$（'#bg'）.attr（'src'，function（）{
$('#bg').attr('src', function() {
    var src = 'backgrounds/dawn.jpg';
    if (hours > 20 || hours < 5) {
        src = 'backgrounds/night.jpg';
    } else if (hours > 17) {
        src = 'backgrounds/dusk.jpg';
    } else if (hours > 8) {
        src = 'backgrounds/day.jpg';
    }
    return src;
})

var src='backgrounds/dawn.jpg'；
如果（小时数>20 | |小时数<5）{
src='backgrounds/night.jpg'；
}否则，如果（小时数>17）{
src='backgrounds/dusk.jpg'；
}否则，如果（小时数>8）{
src='backgrounds/day.jpg'；
}
返回src；
})

$（'#bg'）.attr（'src'，function（）{
var src='backgrounds/dawn.jpg'；
如果（小时数>20 | |小时数<5）{
src='backgrounds/night.jpg'；
}否则，如果（小时数>17）{
src='backgrounds/dusk.jpg'；
}否则，如果（小时数>8）{
src='backgrounds/day.jpg'；
}
返回src；
})

小时变量定义在哪里？你能把整个页面都放进去吗？我现在也添加了相关的HTML，谢谢。@EmilyTwist

hours

定义在哪里？有错误吗？@ManseUK我得到的是：

code

$（'document'）.ready（function（）{var hours=getday（new Date（）.getHours（））；if（hours>20 | | hours<5）{$（'page background>img'）.prop（'src'，'backgrounds/night.jpg'））

code

是这样吗？定义了hours变量吗？你能把整个页面都放进去吗？我现在也添加了HTML的相关部分，谢谢。@EmilyTwist

hours

定义在哪里？有什么错误吗？@ManseUK我把它作为：

code

$（'document'）。准备好了（函数（）{var hours=getDay（new Date（）.getHours（））；if（hours>20 | | hours<5）{$（'page background>img'）.prop（'src'，'backgrounds/night.jpg'））

code

是这样吗？我已经添加了相关的HTML代码，并更改了我正在尝试的代码-虽然不起作用-图像在浏览器中没有更改：我已经添加了相关的HTML代码，并更改了我正在尝试的代码-虽然不起作用-图像不起作用“在浏览器中不更改：我已经更改了我现在的操作方式，并使用人们建议的更改编辑了我的代码，但仍然不起作用-有什么想法吗？我已经更改了我现在的操作方式，并使用人们建议的更改编辑了我的代码，但仍然不起作用-有什么想法吗？”？