jQueryの超実践的なイベントtoggle()メソッドを詳しく解説

例

異なる背景色を切り替える:

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

自分で試してみる

定義と使用法

toggle()メソッドは、選択されたことに応じて2つ以上のイベントハンドラ関数をバインドするために使用されます 要素のクリックイベントを順にバインドします。

このメソッドは、選択した要素の Hide() メソッドと show() メソッドを切り替えるために使用することもできます。

Toggle イベントに 2 つ以上の関数をバインドします

指定された要素がクリックされると、2 つ以上の関数を順番に切り替えます。

3 つ以上の関数が指定された場合、toggle() メソッドはすべての関数を切り替えます。たとえば、関数が 3 つある場合、最初のクリックで最初の関数が呼び出され、2 回目のクリックで 2 番目の関数が呼び出され、3 回目のクリックで 3 番目の関数が呼び出されます。 4 回目のクリックで最初の関数が再度呼び出され、以下同様に続きます。

構文

$(selector).toggle(function1(),function2(),functionN(),...)

自分で試してみる

パラメータ説明必須。要素が偶数回クリックされたときに実行される関数を指定します。 必須。要素が奇数回クリックされるたびに実行される関数を指定します。 オプション。切り替える必要があるその他の機能を指定します。

function1()
function2()
functionN(),...

Hide()とShow()を切り替えます

各要素が表示されているかどうかを確認します。

要素が非表示の場合は show() を実行します。要素が表示される場合、要素は Hide() になります。これによりスイッチング効果が生まれます。

構文

$(selector).toggle(speed,callback)

自分で試してみる

パラメータ説明速度コールバック

	オプション。非表示/表示効果の速度を指定します。デフォルトは「0」です。 可能な値: ミリ秒 (例: 1500) 「遅い」 「普通」 「速い」
	オプション。 toggle() メソッドの完了時に実行される関数。 コールバックの詳細については、コールバック関数のチュートリアルをご覧ください。

要素の表示または非表示

一致するすべての要素のみを表示するか非表示にするかを指定します。

構文

$(selector).toggle(switch)

自分で試してみる

パラメータ説明

スイッチ	必須。 toggle() が選択されたすべての要素のみを表示するか非表示にするかを指定するブール値。 tru​​e - 要素を表示します false - 要素を非表示ます

以上がjQueryの超実践的なイベントtoggle()メソッドを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。