jQuery入門講座使い方-toggleイベント

toggleイベント

クリックされる度に処理を変更するイベント

ボタンの種類にトグルボタンというのがあります。これはクリックされる度に実行内容が変わるボタンでON/OFFが切り替わるスイッチもトグルボタンの１種なのです。toggleイベントは、このようなトグルボタンを実現するためのイベントで、hoverイベント同様にイベントの（）内に複数の処理を設定します。

構文は以下の様になっており、hoverイベントと似ていますが()内に２つ以上のfunctionを設定できる点が異なります。機能としてはクリックに反応し、最初にクリックしたときは処理１が実行され、次にクリックしたときは処理２が実行され、次は処理3を実行というようになっています（最後の処理が実行されると、再び処理１に戻ります）。設定できるfunction数に制限はありませんが、大抵はスイッチを作成するために利用するので２つの場合がほとんどでしょう。

toggleの構文: $(セレクタ).toggle(処理1, 処理2, 処理3, … )

では実際にサンプル（02/04_01.html）で機能を確認してみましょう。今回も構造が分かりやすいように、あらかじめfunctionを設定しています。まずは以下のソース8行目を確認して下さい。toggleイベントが利用され、最初にonFunc次にoffFuncが実行されるようになっています。最後の処理が終わると最初に戻るためonFuncとoffFuncが交互に実行されることになります。

onFunc（1〜3行目）とoffFunc（4〜6行目）は、ほとんど前回のサンプル（02/03_01.html）と同じで、cssメソッドによって背景色を変更しているだけです。では実際にdiv領域をクリックして、背景色がオレンジ→青→オレンジ→青と交互に切り替わるのを確認してください。

function onFunc() {
	$("div").css("background-color", "#F93");	
}
function offFunc() {
	$("div").css("background-color", "#09C");	
}
$(function () {	
	$("div").toggle(onFunc, offFunc);			
});

ついでにtoggleイベントの（）内に処理を3つ設定したサンプルを作成しました。サンプル（02/04_02.html）を開いてjQueryのソースをを確認して下さい。以下の様に設定したので、クリックの度にorangeFunc → greenFunc → blueFunc（以下繰り返し）と順々に実行されていきます。実際にクリックして色がオレンジ→緑→青と変化することを確認して下さい。

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

toggleイベントの説明は以上です。toggleはイベント以外にもtoggleメソッドというがあり、構文が異なるので注意しましょう。toggleメソッドに関しては３章アニメーションで説明します。

ここまでが初心者向けイベントの説明です。この先は中級者以上向けのイベントを紹介しようと思うのですが、jQueryはver1.7から中級者以上向けのイベントが整理され、1.6までのイベントは使わなくても良いようになりました。しかしネットや書籍の情報はver1.6以前のものが多く、独学で知識を広げるためには1.6以前のイベントについても知っておいた方がよいと思うので、次回簡単に紹介しようと思います。

次のページ：ver1.6までのイベント達