jquery改变图片路径答案

【问题标题】：jquery change image pathjquery改变图片路径
【发布时间】：2012-05-30 17:10:09
【问题描述】：

由于在不同浏览器中让背景延伸到整个页面的问题，我不得不使用带有图像的 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>

【问题讨论】：

小时变量在哪里定义？你能把你的整个页面都放上去吗？
我现在也添加了相关的 HTML，谢谢。
@EmilyTwist hours 定义在哪里？有什么错误吗？
@ManseUK 我得到了它：code $('document').ready(function(){ var hours = getDayTime(new Date().getHours()); if ( hours > 20 || hours img').prop('src', 'backgrounds/night.jpg') } code 是吗？

标签： jquery function time image attr

【解决方案1】：

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

应该是

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

由于您已经指定了图像的id，因此无需包含img。从 jQuery 1.6 开始，.prop() 优于 attr()

【讨论】：

我已经添加了相关的 HTML 部分并更改了我正在尝试的代码 - 但它不起作用 - 浏览器中的图像没有改变：S

【解决方案2】：

如果是：

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

那就是：

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

【讨论】：

【解决方案3】：

你应该使用

$('#bg')

而不是

$('#bg img')

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

我已经改变了我现在的工作方式，并根据人们建议的更改编辑了我的代码，但它仍然无法正常工作 - 有什么想法吗？