title: How to assign jQuery click events for the third click?
body: <p>I'm trying to find a simple way to attach click events to an element, which is quite easy for the 1st and 2nd click events.. But, what I am trying to accomplish is a three click Toggle.</p>
  
  <p>1st click = addClas('one');<br>
  2nd click = removeClass('one').addClass('two');<br>
  3rd click = removeClass('two').addClass('three');<br>
  next click would == 1st click and through the loop again.. </p>
  
  <p>I'm using a simple div and applying styling through CSS, to change the elements background position - all pretty typical and easy.. and is cake to do for a toggle() or click() event.. but I can't figure out for the life of me how to handle the 3rd click ! :D</p>
  
  <p>Here is my markup, for example purposes:</p>
  
  <pre><code>&lt;div class="tri-swtich" id="switch"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated !! </p>
  
  <p><strong>UPDATE:</strong><br>
  I've got something that works.. but, IMHO it's ugly and messy.. there's got to be a cleaner, more concise way of doing this:</p>
  
  <pre><code>$(".tri_switch").click(function(){
      var this_id = $(this).attr("id");
  
      if( $(this).hasClass("one") ){                  
          $("input#user_"+this_id).attr('checked','checked');
          $("input.tri_switch_radio").not("#user_"+this_id).removeAttr('checked');
          $(this).removeClass('one').addClass('two');
          $("span.tri_switch_checked").text('User');
      }
      else if ( $(this).hasClass("two") ){
          $("input#admin_"+this_id).attr('checked','checked');
          $("input.tri_switch_radio").not("#admin_"+this_id).removeAttr('checked');
          $(this).removeClass('two').addClass('three');
          $("span.tri_switch_checked").text('Admin');
  
      }
      else if ( $(this).hasClass("three") ){
          $("input#readonly_"+this_id).attr('checked','checked');
          $("input.tri_switch_radio").not("#readonly_"+this_id).removeAttr('checked');
          $(this).removeClass('three').addClass('one');
          $("span.tri_switch_checked").text('Readonly');
  
      }
  //  alert(this_id);
  });
  </code></pre>