title: Changing the value of jQuery's $(this) object inside an event
body: <p>I'm wanting to click an image (<code>img#first</code>) and have it split into three smaller versions of another image (<code>img.cat</code>). Each time <code>img.cat</code> is clicked, it throws the cloned elements in random directions and temporarily shows a lion in place of the <code>img.cat</code> that was clicked.</p>
  
  <p>The cat replication and lion popup both work properly (as you can see by clicking the smaller cat in the upper left corner), but I don't know how to make it so a .click() event on <code>img#first</code> will call the function to replicate smaller cats. To reiterate, I want the <code>img#first</code> to spawn 3 smaller <code>img.cat</code>, then disappear, then if the user continues to click new <code>img.cat</code> objects they continue to spawn more of themselves. The problem is just getting that original <code>img#first</code> to start the chain reaction and then disappear forever.</p>
  
  <p>Here's the <a href="http://jsfiddle.net/t7yu8/14/" rel="nofollow">Fiddle</a>.</p>
  
  <p>If I'm able to just make the entire <code>.click(explode)</code> function work on <code>img#first</code> and then swap that identifier somehow to <code>img.cat</code> after the initial click, wouldn't that do the trick? </p>
  
  <p>For example:</p>
  
  <pre><code>var firstRun = 0
  $('img#first').click(function() {
      if (!firstRun) {
          //do original stuff here
          firstRun = 1;
      } else {
          $(this) = $('img.cat');
          //do img.cat stuff here
      }
  });
  </code></pre>
  
  <p>Or do I need to isolate the explode function so that it can be called separately on two different objects while achieving the same effect?</p>
  
  <p>I honestly have no idea how to go about accomplishing either of these tasks. Maybe there's a simpler way to get what I want.</p>