Question

I am using some images as pagination markers. I am appending them to a span like so.

for(var i=0;i<25;i++){
     if(i==0){
        $('#page').append("<img  src='images/on.gif'/>");
        }
     $('#page').append("<img  src='images/off.gif'/>");
 }

Now when I click my next or previous buttons I first need to set them all to off? Then set the specific one say 5 to on?

How can I change them to the correct images.

Answer 1

Forget for loops, this can be done with jQuery selectors. Put these two lines in the proper place in your javascript file.

$('#page img[src*="on.gif"]').attr('src','images/off.gif'); // selects all images whose src contains "on.gif" and sets all to off.gif

$('#page img:eq(5)').attr('src','images/on.gif'); // set just the 5th one to on.gif

Does this work?