Jquery Image Change -- iterating through images
<p>If I have a set of classes that I want to integrate through, like this:</p>

<p>.g1 ---> .g12</p>

<p>How would I do that?</p>

<p>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.</p>

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

<p>Here's the list item I made:</p>

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

<p>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.</p>
