CSS精灵加载

Question

I want to change the src attribute of img inside of my span with id="slider_arrow",

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

each time my jquery function runs:

    $("#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;
}

My CSS Sprite file has 75px width and 12px of height. Each picture has 25px/12px. The questions are: 1) Do I have correctly written CSS rules?
2) What I need to use to change src of img inside of span?

Thanks!

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])); 
});

DEMO: http://jsfiddle.net/vtkppwuc/6/

Answer 2

Remove the image inside span and use jQuery for setting the css class to your Slider, try this code

<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');           
    }
});