Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Ereignisfunktion jQuery.toggle()

Detaillierte Erläuterung der Ereignisfunktion jQuery.toggle()

Jun 29, 2017 am 10:55 AM
事件 详解

Die Funktion

toggle() wird verwendet, um eine rotierende Handlerfunktion an das Klick--Ereignis jedes übereinstimmenden Elements zu binden.

toggle() ist eine spezielle Ereignisfunktion, die verwendet wird, um mehrere Ereignisverarbeitungsfunktionen an das Klickereignis übereinstimmender Elemente zu binden. Jedes Mal, wenn das Klickereignis ausgelöst wird, führt die Funktion toggle() nacheinander einen der Ereignishandler aus.

Zum Beispiel verwenden wir toggle("click", A, B, C), um drei Event-Handler A, B und C an das Click-Event des Elements zu binden. Der erste Klick führt A aus, der zweite Klick führt B aus, der dritte Klick führt C aus, der vierte Klick führt A aus und der fünfte Klick führt B aus ... (Wenn toggle() mehrmals aufgerufen wird, ist der Raum unabhängig).

Um ein über toggle() gebundenes Ereignis zu löschen , verwenden Sie die Funktion unbind(). Beispiel: unbind("click").

Die hier vorgestellte toggle() ist eine spezielle Click-Event-Funktion jQuery hat auch eine toggle()-Funktion mit demselben Namen, die zum Umschalten der Anzeige/Ausblendung von Elementen verwendet wird.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion wurde in jQuery 1.0 hinzugefügt, wurde jedoch ab 1.8 als veraltet markiert und ab 1.9 entfernt.

jQueryObject.toggle( handler1, handler2 [, handlerN... ] )

Parameter

Parameterbeschreibung

handler1 Ereignisverarbeitungsfunktion, angegeben durch Funktionstyp 1.

handler2 Event-Handler-Funktion 2, angegeben durch Funktionstyp.

handlerN optional/Ereignishandlerfunktion N angegeben durch Funktionstyp, es kann eine beliebige Zahl sein.

Die Ereignisfunktion toggle() übergibt einen Parameter an die Ereignisverarbeitungsfunktion, bei der es sich um das Ereignisobjekt handelt, das das aktuelle Ereignis darstellt.

Wenn der Rückgabewert der Ereignisbehandlungsfunktion falsch ist, bedeutet dies, dass das Standardereignisverhalten des Elements blockiert und verhindert wird, dass das Ereignis im DOM-Baum sprudelt. Wenn beispielsweise die Handlerfunktion des Klickereignisses des Links <a> false zurückgibt, kann das Standard-URL-Sprungverhalten des Links verhindert werden.

Rückgabewert

Der Rückgabewert der toggle()-Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Bitte beachten Sie den folgenden anfänglichen HTML-Code:

<input id="btn" type="button" value="click" >

Das Folgende ist der jQuery-Beispielcode, der sich auf die Ereignisfunktion toggle() bezieht, um die spezifische Verwendung der Ereignisfunktion toggle() zu demonstrieren:

function clickHandler1(){
    alert(&quot;click-1&quot;);
}
function clickHandler2(){
    alert(&quot;click-2&quot;);
}
function clickHandler3(){
    alert(&quot;click-3&quot;);
}
function clickHandler4(){
    alert(&quot;click-4&quot;);
}
$(&quot;#btn&quot;).toggle( clickHandler1, clickHandler2, clickHandler3, clickHandler4 );
//第1次点击执行clickHandler1
//第2次点击执行clickHandler2
//第3次点击执行clickHandler3
//第4次点击执行clickHandler4
//第5次点击执行clickHandler1
//第6次点击执行clickHandler2
//第7次点击执行clickHandler3
//第8次点击执行clickHandler4
//循环切换执行...
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ereignisfunktion jQuery.toggle(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Feb 22, 2024 pm 08:21 PM

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs

Detaillierte Erläuterung des Linux-Befehls „curl'. Detaillierte Erläuterung des Linux-Befehls „curl'. Feb 21, 2024 pm 10:33 PM

Detaillierte Erläuterung des Linux-Befehls „curl'.

Detaillierte Analyse der C-Sprachlernroute Detaillierte Analyse der C-Sprachlernroute Feb 18, 2024 am 10:38 AM

Detaillierte Analyse der C-Sprachlernroute

Detaillierte Erläuterung der Numpy-Versionsabfragemethode Detaillierte Erläuterung der Numpy-Versionsabfragemethode Jan 19, 2024 am 08:20 AM

Detaillierte Erläuterung der Numpy-Versionsabfragemethode

Erfahren Sie mehr über Promise.resolve() Erfahren Sie mehr über Promise.resolve() Feb 18, 2024 pm 07:13 PM

Erfahren Sie mehr über Promise.resolve()

See all articles