How to assign jQuery click events for the third click?

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:

<div class="tri-swtich" id="switch"></div>

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');
        $开发者_C百科("span.tri_switch_checked").text('Readonly');

    }
//  alert(this_id);
});

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');
});

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?

Just implemented something on J QUERY. You can modify this code to fit your needs.

(function($)
{ var defaults = {
    threshold: 1000, // ms
}

function tripleHandler(event)
{
    var $elem = jQuery(this);

    settings = jQuery.extend({}, defaults, event.data);

    var clicks = $elem.data("triclick_clicks") || 0;
    var start  = $elem.data("triclick_start")  || 0;

    if (clicks === 0) { start = event.timeStamp; }

    if (start != 0
        && event.timeStamp > start + settings.threshold)
    {
        clicks = 0;
        start  = event.timeStamp;
    }

    clicks += 1;
    if (clicks === 3)
    {
        clicks     = 0;
        start      = 0;
        event.type = "tripleclick";

        if (jQuery.event.handle === undefined) {
            jQuery.event.dispatch.apply(this, arguments);
        }
        else {
            jQuery.event.handle.apply(this, arguments);
        }
    }

    $elem.data("triclick_clicks", clicks);
    $elem.data("triclick_start",  start);
}

var tripleclick = $.event.special.tripleclick =
{
    setup: function(data, namespaces)
    {
        $(this).bind("touchstart click.triple", data, tripleHandler);
    },
    teardown: function(namespaces)
    {
        $(this).unbind("touchstart click.triple", tripleHandler);
    }
};
})(jQuery);

$("#password").on("tripleclick", function() { 
//console.log('Tripple clicked password'); 
    if ('password' == $('#password').attr('type')) {
       $('#password').prop('type', 'text');
    } else {
        $('#password').prop('type', 'password');
    }
});

<div class="one" id="clickarea">click me</div>
$('#clickarea').click(function(){
  if($( "#clickarea" ).hasClass('one')){
   $(this).removeClass('one').addClass('two');
  }else if($( ".hoverarea" ).hasClass('two')){
   $(this).removeClass('two').addClass('three');
}else{
$(this).removeClass('three').addClass('one');
}

<div class="one" id="clickarea">click me</div>