Comment basculer entre deux fonctions lors d'un clic sur un élément à l'aide de jQuery ?

jQuery Cliquez pour basculer entre deux fonctions

Besoin d'exécuter différentes actions selon qu'un élément est cliqué une ou plusieurs fois ? Voici comment y parvenir avec jQuery :

Méthode .toggle() intégrée

jQuery propose deux méthodes .toggle() :

• Une méthode bascule la visibilité des éléments.
• A La méthode obsolète (supprimée dans jQuery 1.9) appelée toggle(func1, func2) gère efficacement le basculement entre deux fonctions lors d'un clic sur un élément.

Implémentation de plugin personnalisé

En tant que plugin, cette fonctionnalité peut être implémentée comme suit :

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

Utilisation

Avec le plugin, vous pouvez appeler :

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

Exemple spécifique

Sur la base de la question d'origine, vous pouvez obtenir la fonctionnalité souhaitée comme suit :

var count = 0;
$("#time").clickToggle(
    function() {
        $(this).animate({
            width: "260px"
        }, 1500);
    },
    function() {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
);

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!