3

jQueryのtoggle（）は複数の状態をサポートし、指定した数だけ循環します

ドキュメントから：

3つ以上のハンドラーが提供されている場合、.toggle（）はそれらすべての間で循環します。たとえば、ハンドラーが3つある場合、最初のハンドラーは最初のクリック、4番目のクリック、7番目のクリックなどで呼び出されます。

次のコードは、3つの状態すべてを循環して、うまく機能します。

$('#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
});

私の質問は、最初のページの読み込み時に、クラスがバックエンドによって#tagに設定されているという事実についてですが、タグをクリックすると、toggle（）は、初期状態に関係なく、最初のトグル状態「on」からサイクルを開始します。

私が探しているのは、渡された現在の状態のオプションに基づいて次の状態に進むスマートトグルだと思います。

私は4つの状態を追加している可能性があるので、elseステートメントが複雑になることは望ましくありません。

nbクラスの設定と削除は単なる例です。私は他のことをしています。クラスの追加と削除の例を挙げないでください-クラスをチェックして初期状態を見つけることはできますが。

4

1 に答える 1

0

私には、jQueryをハックする必要があるようです。これは確かに礼儀正しくはありませんが、機能します。

私はjQueryのソースコードを調べましたが、これは基本的に次のことを行います。

  1. 新しい一意のIDを生成guidし、最初の関数で指定されたプロパティとして保存します
  2. で呼び出される最後の関数のインデックスを格納しますjQuery._data(element, 'lastToggle'+guid, index)
  3. lastToggle値と関数配列を使用して関数を切り替えます

したがって、トグルインデックスを変更するにはguid、最初の関数からを読み取り、要素に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);

ボタンをクリックするとわかるように、3番目の関数が呼び出されます。後でそのプロパティにアクセスするには、少なくとも最初の関数を変数に定義する必要があります。

また、これは単なるハックであり、jQueryをアップグレードすることでいつか壊れることがあることを忘れないでください。

于 2012-11-14T10:26:44.147 に答える