Question

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 ! 😀

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');
        $("span.tri_switch_checked").text('Readonly');

    }
//  alert(this_id);
});

Answer 1

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