Comment affecter des événements de clic jQuery pour le troisième clic?

Question

J'essaie de trouver un moyen simple d'attacher des événements de clic à un élément, ce qui est assez facile pour les événements 1er et 2ème clic .. Mais, ce que j'essaye d'accomplir est un trois-clic de bascule.

1er clic = addClas ('one'); 2ème clic = removeClass ('one'). AddClass ('two'); 3ème clic = removeClass ('two'). AddClass ('three'); clic suivant serait == 1er clic et à travers la boucle à nouveau ..

J'utilise un simple div et l'application de style à travers CSS, pour changer la position des éléments de fond - tous assez typique et facile .. et est gâteau à faire pour un événement toggle() ou click() .. mais je ne peux pas comprendre pour la vie de moi comment gérer le 3ème clic! : D

ici est mon code, par exemple fins:

Toute aide est grandement appréciée !!

MISE À JOUR: J'ai quelque chose qui fonctionne .. mais, à mon humble avis, il est moche et sale .. il doit y avoir un moyen plus propre, plus concis de le faire: $ («tri_switch »). cliquez sur (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'); 

} 

// alerte (this_id); });

Answer 1

Yup @Codler, toggle() peut prendre plus de deux paramètres par défaut. Il suffit de jeter dans le troisième paramètre:

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

Answer 2

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

est-ce que vous cherchez?