CSS 精灵加载答案

【问题标题】：CSS Sprites loadingCSS 精灵加载
【发布时间】：2014-12-23 05:01:05
【问题描述】：

我想用 id="slider_arrow" 在我的 span 内更改 img 的 src 属性，

<span id="slider_arrow">
      <img />
</span>

每次我的 jquery 函数运行时：

    $("#0").click(function () {
           /*Rest of the function*/
        var arrow = document.getElementById('slider_arrow');
        /*I want to add different slider_arrow's sprite each time i call this                           function*/            
    });

CSS：

.red_arrow_sprite{
    width:25px;
    height:12px;
    background:url("/Images/arrows.png") 0 0px;
}

.yellow_arrow_sprite{
    width:25px;
    height:12px;
    background:url("/Images/arrows.png") -26px 0px;
}

.black_arrow_sprite{
    width:25px;
    height:12px;
    background:url("/Images/arrows.png") -51px 0px;
}

我的 CSS Sprite 文件的宽度为 75 像素，高度为 12 像素。每张图片有25px/12px。问题是： 1) 我是否正确编写了 CSS 规则？
2）我需要用什么来改变跨度内的img的src？

谢谢！

小提琴：http://jsfiddle.net/vtkppwuc/3/

【问题讨论】：

我可以发布一些代码来更改您的 img 的 src 属性，但您确定这是您需要的吗？因为那根本就不是精灵。如果这就是你想要的，我不明白你所有的CSS有什么意义。 CSS 背景图片与图片的 src 属性不同。
我明白了，谢谢:) 我认为它会产生相同的效果:)

标签： javascript jquery html css

【解决方案1】：

$("#0").click(function () {
    var classes = ['red_arrow_sprite','yellow_arrow_sprite','black_arrow_sprite'];
    var $span = $('#slider_arrow');
    $span.attr('class', (classes[($.inArray($span.attr('class'), classes)+1)%classes.length])); 
});

演示：http://jsfiddle.net/vtkppwuc/6/

【讨论】：

this.className 应替换为 $span.attr('class')
你的回答是一个非常漂亮的把戏。我可能会自己使用它。

【解决方案2】：

删除span 中的图片并使用jQuery 将css 类设置为Slider，试试这段代码

<span id="slider_arrow" class="red_arrow_sprite">         
</span>

$("#0").click(function () {
    var item = $('#slider_arrow');
    if (item.hasClass('red_arrow_sprite')){
       item.removeClass('red_arrow_sprite').addClass('yellow_arrow_sprite');
    } else if (item.hasClass('yellow_arrow_sprite')){
       item.removeClass('yellow_arrow_sprite').addClass('black_arrow_sprite');
    } else {
       item.removeClass('black_arrow_sprite').addClass('red_arrow_sprite');           
    }
});

【讨论】：