javascript - 使用 jQuery 设置背景图像仅更改背景一次

标签 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 生成的 Sprite 更新代码.

最佳答案

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

fiddle

虽然这并不重要,但没有必要将 background-image 上的 url() 括起来带有双引号的属性。

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

关于javascript - 使用 jQuery 设置背景图像仅更改背景一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15944127/

相关文章:

javascript - 如何在按键时触发动画

javascript - Facebook 标签应用程序动态 URL

javascript - 信使机器人 : TypeError: Cannot read property 'text' of undefined

jquery - Event.type 在 Mozilla Firefox 中不起作用

php - 突发新闻显示,在选框代码中带有类别库

c# - 这个(通用范围类)条件逻辑应该用多态性代替吗?如果是,那为什么?

java - Switch 语句和不兼容的类型?

javascript - 创建 map 以减少。 Javascript

javascript - 可读.destroy() 不发出 'close' 和 'error' 事件 Node.js

jquery - css3 和 jquery 中的 rotateY 和宽度关系