title: jQuery: changing css of an event target
body: <p>Here's a fiddle where I can't get it to work <a href="http://jsfiddle.net/mjmitche/rAPcQ/22/" rel="nofollow">http://jsfiddle.net/mjmitche/rAPcQ/22/</a></p>
  
  <p>I have html where user clicks a button to add a friend's name</p>
  
  <pre><code> &lt;button id="add-friend"&gt;Add Friend&lt;/button&gt;
  
  &lt;ul id="friends-list"&gt; &lt;/ul&gt;
  </code></pre>
  
  <p>Beside each name on the list, there's a span element rich? the user can click to indicate if the person is rich</p>
  
  <pre><code>Jim     [rich?]
  </code></pre>
  
  <p>I want the color of the name to change if the user clicks the span. I also want the html of the span (i.e. rich?) to change, so that the user can toggle back and forth</p>
  
  <p>In my view, I created an event like this</p>
  
  <pre><code>events: {
        'click span.swap':  'swap',
  
      }, 
  </code></pre>
  
  <p>so that when the user clicks the span, a 'swap' function is called. </p>
  
  <pre><code>swap: function(e) {
  
      var spin = e.target;
      var tit =  $(spin).css('color');
  
      if (tit === 'blue') {
  
          $(spin).css('color', 'black');
          $(spin).html('poor?');
  
      } else {
  
          $(spin).css('color', 'blue');
          $(spin).html('rich?');
  
      }
  </code></pre>
  
  <p>The code in the "swap" function changes the css and html of the element that was clicked. It will change</p>
  
  <p>Jim     [rich?] //originally blue</p>
  
  <p>to </p>
  
  <p>Jim     [poor?] //'poor' is now black</p>
  
  <p>and then give you the ability to toggle if it's already been switched once. However, the code inside 'swap' function is not working, (even though it's passing jsLint).</p>
  
  <p>Can you tell me what I'm doing wrong?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Bonus points if you can tell me how to change the css of the person's name, which is wrapped in a class "friend" in the same function. </p>
  
  <pre><code>&lt;span class="friend" style="color:pink"&gt;' + this.model.get('name') + '&lt;/span&gt; &amp;nbsp; &amp;nbsp; &lt;span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;"&gt;[rich?]&lt;/span&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;button id="add-friend"&gt;Add Friend&lt;/button&gt;
  
  &lt;ul id="friends-list"&gt; &lt;/ul&gt;
  </code></pre>
  
  <p>This is the container for the list elements, which are added then added individually through a backbone.js view</p>