Comment exécuter différentes fonctions sur plusieurs clics avec jQuery ?

Cliquez et basculez : exécuter différentes fonctions avec jQuery

Les développeurs rencontrent souvent le besoin d'exécuter différents blocs de code lorsqu'un élément spécifique est cliqué plusieurs fois. jQuery propose plusieurs solutions pour répondre à cette exigence, notamment .toggle(). Cependant, .toggle() peut ne pas toujours atteindre la fonctionnalité souhaitée.

Une approche consiste à utiliser la méthode .toggle() intégrée de jQuery. Cependant, il convient de noter que depuis jQuery 1.7, cette version de .toggle() est obsolète puis supprimée dans jQuery 1.9. Cela est principalement dû à l'existence de plusieurs méthodes .toggle().

Pour ceux qui recherchent une alternative, jQuery propose un plugin concis et polyvalent spécialement conçu à cet effet.

(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));

Ceci Le plugin, appelé .clickToggle(), nécessite deux paramètres : les fonctions qui doivent être exécutées au premier et au deuxième clic. Il attribue une valeur de données interne pour suivre le nombre de clics actuel. Lorsque l'on clique sur l'élément, il récupère ces données et appelle la fonction appropriée.

Pour utiliser le plugin, il suffit de l'appeler sur l'élément souhaité et de renseigner les fonctions pertinentes :

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

Dans En résumé, jQuery propose plusieurs options pour basculer entre différentes fonctions lors des clics sur les éléments. Bien que .toggle() ne suffise pas toujours, le plugin susmentionné fournit une solution sur mesure à la fois personnalisable et efficace.

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!