使用 jQuery 设置背景图像只更改一次背景答案

【问题标题】：Setting background-image using jQuery changes background only once使用 jQuery 设置背景图像只更改一次背景
【发布时间】：2013-04-11 08:33:03
【问题描述】：

我正在尝试设置一个元素的background-image 属性，具体取决于变量的值。它只在第一次工作。当我切换到就绪状态时，背景图像停止变化。图片本身很小 - 大约 8-10 kB。

这是我的代码：

if(status != '') {
    console.log('status');
    console.log(status);

    switch(status) {
        case 'dev':
            $('#status').css('background-position','0px -160px');
            break;
        case 'ready':
            $('#status').css('background-position','0px -240px');
            break;
        case 'soon':
            $('#status').css('background-position','0px 0px');
            break;
        case 'design':
            $('#status').css('background-position','0px -80px');
            break;
    }
    }

元素的 CSS 如下：

#status {
z-index: 1;
float: right;
height: 80px;
width: 80px;
background: url(/images/front/status-sprite.png);
background-position: 0px -160px;
margin: 0 10px 0 0;
}

行为没有改变。背景图像会更改为就绪，但不会变回来。

编辑：使用csssprites.com生成的精灵更新代码。

【问题讨论】：

控制台（chrome）或萤火虫是否显示了什么？
不，一点也不。没有文件丢失等报告
第一次后，图像将不再从服务器加载（缓存在计算机中）。我想这可能是原因。我通常将图像组合为图像精灵并移动背景位置。参考css-tricks.com/css-sprites
console.log(status) 返回正确的字符串吗？你检查图像路径了吗？
不要使用background-image（它会给我带来很多问题），只需使用background

标签： javascript jquery switch-statement background-image

【解决方案1】：

您的代码看起来不错，我建议验证您尝试显示的每个图像的路径是否存在。（虽然如果路径正确，您可以使用!important 标签覆盖样式表）

小提琴

尽管没关系，但不必用double quotations 包围background-image 属性上的url()。

$('#status').css('background-image','url(/images/front/status-design.png)');

【讨论】：

我将代码更改为使用 css sprites。查看更新版本
@Elmor 介意为精灵提供link 吗？我会模拟一些东西。你看小提琴了吗？
@Elmor 基于您提供的代码。它应该工作。见小提琴。