JQuery: How to switch image back and forth?
<p>I have the following HTML:</p>

<pre><code>&lt;div class="listing ref_1"&gt;
    ...
    &lt;div&gt;&lt;img src="toggleON.png" /&gt;&lt;/div&gt;
    ...
&lt;/div&gt;
&lt;div class="listing ref_2"&gt;
    ...
    &lt;div&gt;&lt;img src="toggleON.png" /&gt;&lt;/div&gt;
    ...
&lt;/div&gt;

&lt;div class="listing ref_3"&gt;
    ...
    &lt;div&gt;&lt;img src="toggleON.png" /&gt;&lt;/div&gt;
    ...
&lt;/div&gt;
</code></pre>

<p>What I want to do is programmatically change the <code>toggleON.png</code> image to <code>toggleOFF.png</code>.</p>

<p>I'm trying to use the following code to do so but it's not working:</p>

<pre><code>$('.ref_2').src("toggleOFF.png");
</code></pre>

<p>Anyone know what I'm doing wrong because the code above doesn't work.</p>

<p>Also, is there a better way to handle this?</p>
