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

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

Answer 1

你的代码看起来很好，我建议validation每个图像都存在路径，你试图显示。 （虽然如果路径正确，您可以使用!important标记覆盖样式表）

小提琴

• 背景小提琴
• 雪碧小提琴

虽然没关系，但是没有必要用double quotations将background-image属性上的url()包围起来。

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