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

时间:2013-04-11 08:33:04

标签: javascript jquery switch-statement background-image

我正在尝试设置一个元素的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生成的精灵更新代码。

1 个答案:

答案 0 :(得分:1)

你的代码看起来很好,我建议验证每个图像都存在路径,你试图显示。 (尽管如果路径正确,您可以使用!important标记覆盖样式表)

<强>小提琴

虽然没关系,但没有必要用url()包围background-image属性上的double quotations

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