javascript - CSS Sprite 加载

Question

我想用 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) 我需要使用什么来更改 span 内 img 的 src？

谢谢!

fiddle :http://jsfiddle.net/vtkppwuc/3/

Answer 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/