デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.toggle( )クリックのたびに異なる処理を実行

構文

クリックのたびに異なる処理を実行返値:jQueryオブジェクト
jQo.toggle( function, function, [function...] )ver1.0〜1.8.2
※ver1.9で廃止されました

機能

引数に2つ以上のfunctionを設定しクリックのたびに異なる処理を実行します。スイッチの様な仕組みを簡単に作成できます。

同じ要素に複数のtoggleメソッドを利用したりすると正常に機能しない場合があります。そのためか、toggleメソッドはv1.9で廃止となり利用できなくなりました

解説

2つのfunctionを設定(スイッチ)

サンプル(toggle/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、toggleメソッドの引数に「onFunc」と「offFunc」が設定されています。この2つのfunctionがクリックのたびに交互に実行されます。

$(function () {
	$("div").toggle(onFunc, offFunc);
});

toggleメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そして実行したい処理を{}の中に書きます、何かをreturnする必要はありません。
イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

toggleに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 実行したい処理
}

サンプルtoggle/01.htmlで利用した2つのfunctionは以下の様になっており、onFuncではtextメソッドを利用してdiv要素に「ON」と表示し、cssメソッドを利用してdiv要素の背景色をオレンジに変更しています。

function onFunc(){
	$("div").text("ON");
	$("div").css("background-color","#f90");
}

offFuncでも同じようにtextメソッドを利用して「OFF」と表示し、cssメソッドを利用して背景色を青に変更しています。

function offFunc(){
	$("div").text("OFF");
	$("div").css("background-color","#09c");
}

結果として、div要素内をクリックするたびに背景色がオレンジ→青→オレンジと交互に切り替わり、表示される文字もON→OFF→ONと切り替わります。
イベントのfunction設定は、引数に無名関数を設定することが多いです。→サンプル(toggle/01b.html

$("div").toggle(
	function onFunc(){
		$("div").text("ON");
		$("div").css("background-color","#f90");
	},
	function offFunc(){
		$("div").text("OFF");
		$("div").css("background-color","#09c");
	}
);

上記のように無名関数を利用する場合は2つのfunctionを仕切るカンマ(5行目)を忘れないように気を付けましょう。

2以上のfunctionを設定できます

toggleメソッドは引数に2つ以上のfunctionを設定できます。サンプル(toggle/02.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、toggleメソッドの引数に「greenFunc」「orangeFunc」「blueFunc」が設定されています。これらのfunctionがクリックのたびに順々に実行されます

$(function () {
	$("div").toggle(greenFunc, orangeFunc, blueFunc);
});

各functionは以下の様になっており、どのfunctionもtextメソッドでdiv要素内に番号表示し、cssメソッドで背景色を変更しています。

function greenFunc(){
	$("div").text("1");
	$("div").css("background-color","#9f3");
}
function orangeFunc(){
	$("div").text("2");
	$("div").css("background-color","#f90");
}
function blueFunc(){
	$("div").text("3");
	$("div").css("background-color","#09c");
}

結果として、div要素をクリックするたびに番号が1→2→3→1と繰り返され、それに合わせて背景色も緑→オレンジ→青→緑と繰り返されます。

v1.9で廃止されました

toggleメソッドはv1.9で廃止されたため利用できません。サンプル(toggle/03.html)を開いてbody内の構成とjQueryに変更がないことを確認して下さい。変更した点は以下の様にバージョンを1.9に変更した点だけです。

<script type="text/javascript" src="../../../css_js/jquery-1.9.0.min.js"></script>

結果として正しく機能せずdiv要素がアニメしながら消えてしまいます。これは演出効果のtoggleメソッドと解釈されるためです(演出効果のtoggleメソッドは廃止になっていません)。

関連項目

全く同じ綴りで、表示/非表示をアニメーションで設定するtoggleメソッドがあります。2つの区別は構文の違いで見分けましょう。

メモ

動的な要素には対応していません

toggleメソッドは動的な要素に利用できません。サンプル(toggle/test01.html)を開いてbody内に何も無いことを確認してください。jQueryはほとんどtoggle/test01.htmlと同じなのですが、以下の様にappendメソッドを利用して動的にdiv要素を追加しています。

$(function () {
	$("div").toggle(onFunc, offFunc);
	$("body").append("<div>");
});

結果としてサンプルtoggle/01.htmlと異なり、div要素をクリックしても反応せず、動的な要素に対応していないことが確認できます。ちなみに要素を追加してからtoggleメソッドを利用すれば機能させることはできます。サンプル(toggle/test01b.html)はappendメソッドをtoggleメソッドよりも前に設定しただけですが、サンプルtoggle/01.htmlと同じように機能します。

$(function () {
	$("body").append("<div>");
	$("div").toggle(onFunc, offFunc);
});