2012-11-14 83 views
3

jQuery的肘節()支持多個狀態,和它循環通過多達你給它jquery的肘節3狀態與初始狀態

documentation

如果提供多於兩個處理程序, .toggle()將在它們的所有 之間循環。例如,如果有三個處理程序,則會在第一次點擊,第四次點擊,第七次點擊時等第一個 處理程序被調用。

下面的代碼很好用,循環遍歷所有三種狀態。

$('#tag').toggle(function() { 
    //set cssClass to 'on' 
    //remove all other classes 
}, function() { 
    //set cssClass to 'off' 
    //remove all other classes 
}, function() { 
    //set cssClass to 'none' 
    //remove all other classes 
}); 

我的問題是有關的事實,在inital頁面加載,該類被設置在由後端的#tag但點擊標籤切換()的時候從「第一切換狀態開始循環'不管初始狀態如何。

我想什麼,我期待的是一個聰明的切換是進入下一個狀態基於對傳入的當前狀態的選項。

我可能會增加四種狀態,所以我不想複雜,如果else語句。

n.b類設置和刪除僅僅是一個例子。我正在做其他事情。請不要給添加和刪除類的例子 - 雖然你可以檢查類來找到初始狀態。

回答

0

在我看來,你需要對jQuery進行破解,這並不禮貌,但可行。

我接過來一看到jQuery的源代碼,這是它主要的作用:

  1. 新生成一個唯一的ID和將其作爲你的第一個功能的
  2. 房屋指數命名​​財產它是通過你的函數使用lastToggle值稱爲jQuery._data(element, 'lastToggle'+guid, index)
  3. 切換最後一個函數,你的功能陣列

因此,爲了更改切換索引,您需要從第一個函數中讀取​​,並使用元素上的jQuery._data設置所需的值。

,我讓你在這裏一個簡單的例子: http://jsfiddle.net/2gJdG/

這裏的要點是:

var fn1 = function(){ 
    console.log(1);   
}; 

$('button').toggle(fn1, function(){ 
    console.log(2); 
}, function(){ 
    console.log(3); 
}, function(){ 
    console.log(4); 
}); 

jQuery._data($('button').get(0), 'lastToggle' + fn1.guid, 2); 

你可以通過點擊按鈕將調用第三個功能等等看。 您將需要至少在變量中定義第一個函數以便稍後訪問它的屬性。

請記住,這只是一個黑客攻擊,有一天可能會通過升級你的jQuery來破壞。

+0

這是一個有趣的想法。我想知道如果我們可以做一個jQuery插件狀態做這個相同的行爲。調用toggleState() – lukemh

+0

僅供參考這是實際的代碼:https://gist.github.com/4077164 – lukemh

+0

這將是相當容易的。你在這裏:http://jsfiddle.net/pWkMW/ –