title: jquery change or toggle images when clicked
body: <p>I'm trying to do a 'when image1 is clicked, show image2, when image2 is clicked, show image3, when image3 is clicked, show image1...' thing.</p>
  
  <p>It works for 2 images - image1 goes to 2 and image2 goes to 1 and so on, but when a 3rd image is introduced it gets messed up. My code is:</p>
  
  <pre><code> &lt;img id ="rotate_images" src="img1_on.png"/&gt;
  
  &lt;script&gt;
  
  $('#rotate_images').on({
      'click': function() {
           var src = ($(this).attr('src') === 'img1_on.png')
              ? 'img2_on.png'
              : 'img1_on.png';
           $(this).attr('src', src);
           var src = ($(this).attr('src') === 'img2_on.png')
              ? 'img3_on.png'
              : 'img2_on.png';
           $(this).attr('src', src);
  
       }
  
  });
  </code></pre>
  
  <p>I sort of know why it's happening - image1 goes to image3, because it skips the first block of code, and image3 goes to image2, for the same reason but...is there something I could add in to fix it? Thanks for any help.</p>
  
  <p>Chris.</p>