Comment basculer entre les fonctions en cliquant sur jQuery ?

Basculer entre les fonctions lors d'un clic avec jQuery

Dans jQuery, la tâche d'alterner entre les fonctions lorsqu'un élément est cliqué peut être accomplie avec différents approches.

JQuery intégré .toggle()

jQuery fournit deux versions de la méthode .toggle(). Celui mentionné dans la question, qui est utilisé pour basculer la visibilité, est désormais obsolète. Cependant, il existe une version alternative conçue spécifiquement pour basculer entre les fonctions en cas de clic.

$(selector).toggle(function1, function2);

Cette méthode accepte deux fonctions comme arguments et alterne entre elles à chaque clic.

Plugin personnalisé

Comme alternative, il est possible de créer un plugin personnalisé qui offre une implémentation plus polyvalente. Ce plugin, appelé "clickToggle", permet d'attribuer plusieurs fonctions et peut être utilisé pour n'importe quel événement.

$.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) % funcs.length;
    });
    return this;
};

Pour utiliser ce plugin, spécifiez les fonctions en arguments :

$('#element').clickToggle(function1, function2);

Mise en œuvre améliorée

Le code fourni peut être encore optimisé pour une meilleure performances :

$(function() {
    var clickCallbacks = [function1, function2];
    $('#element').click(function() {
        clickCallbacks[$(this).data('toggleclicked')++]();
    });
});

Cette approche réduit considérablement le nombre d'appels de fonction en attribuant le gestionnaire de clics une seule fois, ce qui entraîne des temps d'exécution plus rapides.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!