title: Toggling Classes on Focus/Blur
body: <p>I have four list items that show as a result of user selection. When the user clicks on one of these items, the class changes from '.xx' to '.yy' (changing the background color). I also have a number of text input boxes outside of the last li .I want to be able to change the class of that  last li from .xx to .yy when the input boxes have focus and/or there is text in the boxes. If there is no text or focus, then the li class is changed back to .xx. </p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;li class="xx lastitem"&gt;
      &lt;/li&gt;
  
  &lt;span class="iknow-form"&gt;
     &lt;input type="text" class="iknow-input" name="entry_name"&gt;
     &lt;input type="text" class="iknow-input" name="entry_street"&gt;
     &lt;input type="text" class="iknow-input" name="entry_city"&gt;
     &lt;input type="text" class="iknow-input" name="entry_state"&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I have tried a few different things, but nothing seems to be working. </p>
  
  <pre><code>$('input.iknow-input').bind('focus blur', function () {
      $(this).find('.lastitem').toggleClass('yy').toggleClass('xx');
  });
  </code></pre>
  
  <p>I know there also had to be some keyup component but I am not sure how to incorporate that. Any help would be much appreciated. Thanks!</p>