jQuery click / bascule entre deux fonctions

Question

Je suis à la recherche d'un moyen d'avoir deux opérations / fonctions / "blocs de code" exécuter lorsque quelque chose est cliqué, puis un autre bloc quand la même chose est cliqué à nouveau. J'ai mis cela ensemble. Je me demandais si il y avait une plus efficace / de manière élégante. Je sais à propos de jQuery .toggle() , mais il sorte de suce.

Travail ici: http://jsfiddle.net/reggi/FcvaD/1/

var count = 0;
$("#time").click(function() {
    count++;
    //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
        $(this).animate({
            width: "260px"
        }, 1500);
    }
    // on even clicks do this
    else if (isEven(count) === true) {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
});

Answer 1

jQuery a deux méthodes appelées .toggle(). L' autre ^[docs] est exactement ce que vous voulez pour cliquez sur événements.

Remarque: Il semble que, au moins depuis jQuery 1.7, cette version de l' .toggle est obsolète, probablement pour cette raison exactement, à savoir que les deux versions existent. À l'aide de .toggle pour modifier la visibilité des éléments est juste un plus fréquent usage. La méthode a été supprimé en jQuery 1.9.

Ci-dessous est un exemple de comment on pourrait appliquer la même fonctionnalité qu'un plugin (mais probablement expose les mêmes problèmes que la version intégrée (voir le dernier paragraphe de la documentation)).

---

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

DÉMO

(Avertissement: je ne dis pas que c'est la meilleure mise en œuvre! Je parie qu'il peut être amélioré en termes de performances)

Et puis l'appeler avec:

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

Mise à jour 2:

En attendant, j'ai créé un plugin adéquat pour cela. Il accepte un nombre arbitraire de fonctions et peut être utilisé pour n'importe quel événement. Il peut être trouvé sur GitHub.

Answer 2

DEMO

Documentation .one () .

Je suis très en retard pour répondre mais je pense que c'est le code le plus court et pourrait aider.

 function handler1() {
    alert('First handler: ' + $(this).text());
    $(this).one("click", handler2);
}
function handler2() {
    alert('Second handler: ' + $(this).text());
    $(this).one("click", handler1);
}
$("div").one("click", handler1);
 

DEMO Avec Code Op

 function handler1() {
    $(this).animate({
        width: "260px"
    }, 1500);
    $(this).one("click", handler2);
}

function handler2() {
    $(this).animate({
        width: "30px"
    }, 1500);
    $(this).one("click", handler1);
}
$("#time").one("click", handler1);
 

Answer 3

DÉMONSTRATION EN DIRECT

function a(){
   console.log('a');
}
function b(){
   console.log('b');
}

$("#element").click(function() { 
  return (this.tog = !this.tog) ? a() : b();
});

C'est tout.
_{Le truc est de mettre à l' this Objet un boolean bien tog, et de l'activer à l'aide de la négation (tog = !tog)
et de mettre le nécessaire appels de fonction dans un Opérateur Conditionnel ?:}

---

À l'OP de l'exemple (même avec plusieurs éléments) pourrait ressembler à:

function a(el){
   $(el).animate({width: "260px"}, 1500); 
}
function b(el){
   $(el).animate({width: "30px"}, 1500);
}

$(".time").click(function() {
  var el = this;
  return (el.t = !el.t) ? a(el) : b(el);
}); 

Answer 4

Je ferais quelque chose comme ceci pour le code que vous avez montré, si tout ce que vous avez à faire est de basculer une valeur:

 var oddClick = true;
$("#time").click(function() {
    $(this).animate({
        width: oddClick ? 260 : 30
    },1500);
    oddClick = !oddClick;
});
 

Answer 5

J'ai utilisé cela pour créer un effet de bascule entre deux fonctions.

 var x = false
$(element).on('click', function(){
 if (!x){
  //function
  x = true;
 }
 else {
  //function
  x = false;
 }
});