CODEWITHSUNDEEP
javascriptjquery
omochan
omochan

Reputation: 11

Jquery Image Change -- iterating through images

If I have a set of classes that I want to integrate through, like this:

.g1 ---> .g12

How would I do that?

I have the increment thing I want to do and I believe I've written it properly, but I don't know how to concatenate that variable with the .grain so I can change only one square per click.

$("#grains").click(function(){
var x;
x++;
$(".grain").attr('src',"orangesq-01.png");
});

Here's the list item I made:

<ul id="grains">
            <li><img src="blusq-01.png" class="grain" /></li>
            <li><img src="blusq-01.png" class="grain1" /></li>
            <li><img src="blusq-01.png" class="grain2" /></li>
            <li><img src="blusq-01.png" class="grain3" /></li>
            <li><img src="blusq-01.png" class="grain4" /></li>
            <li><img src="blusq-01.png" class="grain5" /></li>
            <li><img src="blusq-01.png" class="grain6" /></li>
            <li><img src="blusq-01.png" class="grain7" /></li>
            <li><img src="blusq-01.png" class="grain8" /></li>
            <li><img src="blusq-01.png" class="grain9" /></li>
            <li><img src="blusq-01.png" class="grain10" /></li>
            <li><img src="blusq-01.png" class="grain11" /></li>
        </ul>

I think you get the idea of what I'm trying to do. If I could figure out that concatenating thing, it would be awesome.

Upvotes: 0

Views: 102

Answers (2)

Andrew
Andrew

Reputation: 13853

You can just append the index or just use the .eq() call if they are in order already.

var x = 0;
$("#grains").click(function(){
 $(".grain" + (x === 0 ? '' : x)).attr('src',"orangesq-01.png");
 //or
 $(this).find('img').eq(x).attr('src',"orangesq-01.png");
  x++;
});

Heh http://jsfiddle.net/mURxA/

Upvotes: 2

Richard
Richard

Reputation: 8280

An alternative, more dynamic approach, would be use a custom selector in conjunction with eq(0) to simply select the first image, like so:

$('#grains').click(function()
{
    $('img[src="blusq-01.png"]', this).eq(0).attr('src', 'orangesq-01.png');
});

Hope you don't mind Andrew, I updated your example.

Upvotes: 0

Related Questions