jQuery.toggle() 事件函數詳解

toggle()函數用於為每個匹配元素的click事件綁定輪流的處理函數。

toggle()是一個特殊的事件函數，用來為匹配元素的click事件綁定多個事件處理函數。每次觸發click事件時，toggle()函數會輪流執行其中的一個事件處理函數。

例如，我們使用toggle("click", A, B, C)為元素的click事件綁定了3個事件處理函數A、B、C。第一次點選執行A，第二次點選執行B，第三次點選執行C，第四次點擊又執行A，第五次點擊又執行B …(如果呼叫了多次toggle()，它們之間是獨立的)。

要刪除透過toggle()綁定的事件，請使用unbind()函數。例如:unbind("click")。

這裡介紹的toggle()是一個特殊的click事件函數，jQuery還有一個同名的toggle()函數，用來切換元素的顯示/隱藏。

此函數屬於jQuery物件(實例)。

語法

jQuery 1.0 新增函數，但從1.8開始被標記為過時，並從1.9開始移除。

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

參數

參數 說明

handler1 Function型別指定的事件處理函數1。

handler2 Function類型指定的事件處理函數2。

handlerN 可選/Function類型指定的事件處理函數N，可以有任意多個。

事件函數toggle()會為事件處理函數傳入一個參數，即表示目前事件的Event物件。

如果事件處理函數的傳回值為false，則表示阻止元素的預設事件行為，並停止事件在DOM樹中冒泡。例如，<a>連結的click事件的處理函數傳回false，可以阻止連結的預設URL跳轉行為。

傳回值

toggle()函數的傳回值為jQuery類型，傳回目前jQuery物件本身。

範例&說明

請參考下面這段初始HTML程式碼：

<input id="btn" type="button" value="點選" >

以下是與toggle()事件函數相關的jQuery範例程式碼，以示範toggle()事件函數的具體用法：

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

以上是jQuery.toggle() 事件函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！