Question

由于在不同浏览器中将背景拉伸到整个页面的问题，我不得不使用带图像的div来覆盖页面。

我要做的是让这张图片根据一天中的不同时间而改变。当我在CSS中使用更传统的background-image属性时，我的工作正常，但是我在翻译它时遇到了更改图像的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>

Answer 1

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

应该只是

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

当您指定图像的id时，无需包含img。从jQuery 1.6开始，.prop()比attr()更受欢迎

Answer 2

您应该使用

$('#bg')

而不是

$('#bg img')

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

Answer 3

$('#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;
})

Answer 4

如果是：

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

然后是：

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

Answer 5

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

$("#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选择器，因为这是图像本身。

jquery更改图像路径

5 个答案: