jquery - 如何为第三次点击分配 jQuery 点击事件？

Question

我正在尝试找到一种简单的方法将点击事件附加到元素，这对于第一次和第二次点击事件来说非常容易。但是，我想要完成的是三次点击切换。

第一次点击 = addClas('one');
第二次点击=removeClass('one').addClass('two');
第三次点击=removeClass('two').addClass('三');
下一次点击将==第一次点击并再次循环..

我正在使用一个简单的 div 并通过 CSS 应用样式，来更改元素背景位置 - 所有这些都非常典型且简单.. 对于toggle() 或 click() 事件来说是小菜一碟.. 但我可以我一辈子都不知道如何处理第三次点击! :D

这是我的标记，用于示例目的:

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

非常感谢任何帮助!

更新:
我有一些有用的东西..但是，恕我直言，它又丑又乱..必须有一种更干净、更简洁的方法来做到这一点:

$(".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

是的@Codler，toggle() 可以采用超过默认的两个参数。只需传入第三个参数即可:

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