jQuery入門講座サンプル-スイッチの作成

スイッチの作成

サンプル紹介

スイッチの作成

jQueryはcssのクラスを扱うメソッドが豊富にあるため、簡単にスイッチのインターフェイスを作成する事ができます。まずは右の画像をクリックしてサンプルを開き、画像をクリックする度にON/OFFが切り替わることを確認してください。

概要

cssのクラスの有無で状態を管理

普通はスイッチを作成する際、フラグを作成して状態を管理しなければなりません。しかしjQueryではフラグの代わりにcssのクラスの有無を利用することで、簡単にスイッチを作成する事ができます。

解説

htmlとcssの確認

まずはhtmlを確認しましょう。サンプル（switch/00.html）のソースを開いてbody内の構成を確認して下さい。以下の様にid属性switchのdiv要素が1つあるだけです。

<body>
	<div id="switch"></div>
</body>

続いてcssを確認します。ポイントは背景画像の扱いです。まずは以下の5行目で利用している画像images/switch.gif（別窓で画像が開きます）を確認してください。この画像の大きさは幅200pxで高さが100pxあるのですが、cssで設定した高さは50px（下記4行目）しかないため上半分のOFFの画像しか表示されません。

#switch{
	cursor:pointer;
	width:200px;
	height:50px;
	background-image:url(images/switch.gif);
}
.active{
	background-position:bottom;
}

続いて7〜9行目のactiveクラスの設定を確認してください。このcss設定はまだ利用していませんが内容を確認しておきます。cssのbackground-position属性を利用して背景位置を下揃えに変更しているだけです。

そのためid属性がswitchの要素に対しactiveのclass属性を設定すると、表示している画像が下揃えになり、隠れていたONの画像が表示されるようになります。つまりid属性がswitchの要素に対しactiveのclass属性を付けたり外したりするだけでON/OFFの切替が可能になるのです。

jQueryの設定

ではjQueryを追加していきましょう。サンプル（switch/01.html）のソースを開いて以下のjQueryが追加されたのを確認してください。まず1行目は使い方「readyイベント」で説明した、ページ内のDOM要素の読込が完了してからjQueryを実行する仕組みです。

そして2行目の処理は使い方「イベント(1)」で説明したイベントの設定です。つまりid属性switchの要素がクリックされたら3行目の処理を実行するようになっています。

$(function () {
	$("#switch").click(function(){
		$(this).toggleClass("active");
	});
});

今回のポイントは3行目のtoggleClassメソッドです。このメソッドは引数で設定したclass属性がない場合はclass属性を追加し、ある場合は削除するメソッドです。つまりクリックされる度にactiveのclass属を付けたり外したりを繰り返します。
※thisについて忘れてしまった方は使い方「thisについて(1)」を復習してください。

前項で説明したようにcssの設定でactiveのclass属性の有無によってON/OFFの表示切り替わるようになっていますから、これだけで画像をクリックするとON/OFFが切り替わるのです。

スイッチの状態を取得する

画像が切り替わるだけではコンテンツには利用できません。なのでスイッチの状態を取得する方法を説明します。とはいえ仕組みは簡単で、class属性activeの有無を取得するだけです。

サンプル（switch/02.html）を開いてbody内にbutton要素が追加されているのを確認してください。

<body>
	<div id="switch"></div>
	<button>check</button>
</body>

続いてjQueryに以下の処理が追加されているのを確認してください。ポイントは2行目のhasClassメソッドです。これは指定したclass属性の有無を調べるメソッドで、有ればtrue無ければfalseを返します。

$("button").click(function(){
	var flg = $("#switch").hasClass("active");
	alert(flg);
});

つまり2行目では、id属性switchの要素にclass属性activeが有るか無いかを調べ、その結果を左辺の変数flgに代入します。変数flgは3行目でアラートで表示するようにしているので、結果としてbuttonをクリックするとスイッチの状態（true/false）がアラートで表示されます。この様にしてスイッチの状態が取得できます。

ONの処理とOFFの処理

スイッチの状態を調べるだけではコンテンツへの利用は不十分です。最後にスイッチがONになった時の処理とOFFになった時の処理の設定の仕方を説明します。サンプル（switch/03.html）を開いてbody内の構成を確認してください。button要素の代わりにid属性がcheckのspan要素が追加されています。

<body>
	<div id="switch"></div>
	<span id="check"></span>
</body>

jQueryは、まず以下の部分を確認してください。2つのfunction（onFuncとoffFunc）が作成されています。処理内容はtextメソッドを利用して、追加したid属性checkの要素に「ONの処理を実行するよ！」や「OFFの処理を実行するよ！」とテキストを表示するだけです。

function onFunc(){
	$("#check").text("ONの処理を実行するよ！");	
}
function offFunc(){
	$("#check").text("OFFの処理を実行するよ！");	
}

続いてid属性switchの要素がクリックされた時の処理に、以下の処理が追加されているのを確認してください。1行目のhasClassメソッドは前項で説明したとおりです。今回のポイントは、その次でif文によって変数flgの値がtrueだったらonFuncを実行し、そうでなければ（つまりfalseなら）offFuncを実行するようにしました。

var flg = $(this).hasClass("active");
if(flg == true){
	onFunc();
}else{
	offFunc();
}

結果として、スイッチがONになると「ONの処理を実行するよ！」と表示され、OFFになると「OFFの処理を実行するよ！」と表示されます。またif/else文は三項演算子を利用すると短く書くことができます。

サンプル（switch/03.html）を開いてスイッチがクリックされた時の処理が以下の様に変更されているのを確認してください。三項演算子を利用すればtrue/falseの時の処理が以下の様に1行にまとめられます。

$("#switch").click(function(){
	$(this).toggleClass("active");
	$(this).hasClass("active") ? onFunc() : offFunc();
});

実際にスイッチをクリックして問題なく機能することを確認してください。これでスイッチの説明は完了です。次回は画像にマウスオーバーした時にキャプションを表示するサンプルを説明します。

次のページ：キャプションの表示