How to assign jQuery click events for the third click??

Question

Hello, 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.

1st click = addClas('one'); 2nd click = removeClass('one').addClass('two'); 3rd click = removeClass('two').addClass('three'); next click would == 1st click and through the loop again..

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

here is my markup, for example purposes:

Any help is greatly appreciated !!

UPDATE: 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: $(".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); });

Answer 1

Use toggle http://api.jquery.com/toggle/

Answer 2

Yup @Codler, toggle() can take more than the default two parameters. Just throw in the third parameter:

$('#element').toggle(function(){
  $(this).addClass('one');
},
function(){
  $(this).removeClass('one').addClass('two');
},
function(){
  $(this).removeClass('two').addClass('three');
});

Answer 3

var counter = 0;
$(".button").bind("click",function(){
    counter++;
    switch(counter){
        case 1:
            doSomething();
            break;
        case 2:
            doSomething2();
            break;
        case3:
            doSomething(3);
            counter=0;
            break;
    }
})

is it what you looking for?