Heim > Web-Frontend > js-Tutorial > Wie schalte ich mit jQuery zwischen zwei Funktionen beim Klicken auf ein Element um?

Wie schalte ich mit jQuery zwischen zwei Funktionen beim Klicken auf ein Element um?

Barbara Streisand
Freigeben: 2024-11-09 01:42:02
Original
670 Leute haben es durchsucht

How to Toggle Between Two Functions on Element Click Using jQuery?

jQuery Click Toggle Between Two Functions

Müssen Sie unterschiedliche Aktionen ausführen, je nachdem, ob ein Element einmal oder mehrmals angeklickt wird? So erreichen Sie dies mit jQuery:

Eingebaute .toggle()-Methode

jQuery bietet zwei .toggle()-Methoden:

  • Eine Methode schaltet die Sichtbarkeit von Elementen um.
  • A Die veraltete Methode (entfernt in jQuery 1.9) namens toggle(func1, func2) verarbeitet effizient das Umschalten zwischen zwei Funktionen beim Klicken auf ein Element.

Benutzerdefinierte Plugin-Implementierung

Als Plugin kann diese Funktionalität implementiert werden als folgt:

(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));
Nach dem Login kopieren

Verwendung

Mit dem Plugin können Sie Folgendes aufrufen:

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

Spezifisches Beispiel

Basierend auf der ursprünglichen Frage können Sie die gewünschte Funktionalität wie folgt erreichen:

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

Das obige ist der detaillierte Inhalt vonWie schalte ich mit jQuery zwischen zwei Funktionen beim Klicken auf ein Element um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage