jQuery入門講座診断系コンテンツ-選択肢の作成(2)

選択肢の作成(2)

概要

選択されていたボタンを選択解除、クリックされたボタンを選択

選択肢がクリックされた際の「現在選択されている選択肢の選択を解除して、クリックされた選択肢を選択する」という処理はラジオボタン以外にも利用できる大切な考え方です。この考え方を学ぶのがこのページの目的です。

解説

クリックされた選択肢のidを取得する

使い方「thisについて(2)」で説明したように、クリックされた要素のidを取得するにはthisを利用します。サンプル（radio2/01.html）のソースを開いて、以下のjQueryを確認して下さい。

$("ul>li").click(function (){
	alert(this.id);
});

この処理によって、li要素がクリックされるとアラートでidを表示します。

li要素を選択状態に切り替える

取得したidの情報はラジオボタンの処理に利用するのですが、その前にcssを操作してクリックされたli要素を選択状態のデザインに変更しましょう。サンプル（radio2/02.html）のjQueryを確認して下さい。以下の様にクリックされた要素（this）に対してaddClassメソッドを利用し、「selected」のクラスを追加しています。

$("ul>li").click(function (){
	$(this).addClass("selected");
});

前回説明したようにli要素に「selected」のクラスを設定するとデザインが選択状態に切り替わりますから、結果としてクリックした選択肢が選択状態になります。

選択されたidを記憶

ラジオボタンを実現するためには他の選択肢がクリックされたら、選択状態の選択肢を元に戻さないといけません。この処理は色々なことに応用できるので、必ず理解するようにしましょう。

ポイントは現在選択されているidの記憶です。記憶することにより、別な要素がクリックされた際に以前の要素を元に戻すことができるのです。サンプル（radio2/03.html）のソースを開いて、以下の様に変数selectIDが追加されているのを確認して下さい。1行目で作成し、4行目で利用しています。

var selectID;			
$("ul>li").click(function (){
	$(this).addClass("selected");
	selectID = this.id;
});

4行目で変数「selectID」にクリックされたidの要素を代入（記憶）していますが、見た目には変化が分かりません。ですのでアラートを追加したサンプル（radio2/03b.html）を用意しました。

jQueryには以下の様にアラートが追加され、li要素がクリックされると変数selectIDの内容を表示します。

$("ul>li").click(function (){
	$(this).addClass("selected");
	alert(selectID + "の選択肢を元に戻します");
	selectID = id;
});

実際に選択肢をクリックして動作を確認しましょう。まずは1番上の選択肢をクリックして下さい。最初は何も選択されていないため「undefinedの選択肢を元に戻します」と表示されます。続いて一番下の選択肢をクリックして下さい。アラートで「0の選択肢を元に戻します」と表示され、前回のクリックで選択状態にしたidを記憶していることが確認できます。

後はアラートの内容通り、記憶した前回の選択肢を元の状態に戻すだけです。

ラジオボタンの完成

選択状態を元に戻すためには、追加した「selected」のクラス属性を削除します。クラス属性はremoveClassメソッドを利用します。サンプル（radio2/04.html）のソースを開いて、アラートが以下の様に書き換えられていることを確認して下さい。

$("ul>li").click(function (){
	$(this).addClass("selected");
	$("#" + selectID).removeClass("selected");
	selectID = this.id;
});

まずポイントなのはセレクタの部分「"#" + selectID」です。ここで記憶した前回のid番号にcssでidを指す「#」を追加してcssでのid表記にしています。そうして選択した要素に対してremoveClassメソッドを利用して「selected」のクラスを外して、選択状態を解除しています。結果として、クリックすると前回選択状態にした選択肢は元に戻ります。

メモ

情報の記憶に利用する変数について

変数は定義した場所によって利用できる範囲がきまります（→参考：google検索「変数スコープ」）。具体的には定義されたfunctionの外では利用できず、functionの実行完了と共に削除されます。

この「削除」されるのがポイントで、削除されるため情報の記憶に利用できません。分かりにくいのでサンプルで確認します。サンプル（radio2/test01.html）を開いて、ほとんどサンプルradio2/04.htmlと同じ事を確認して下さい。異なるのは以下の様に変数selectIDを定義した場所がクリックのfunction内に移動した点だけです。

$("ul>li").click(function (){
	var selectID;
	$(this).addClass("selected");
	$("#" + selectID).removeClass("selected");
	selectID = this.id;
});

この場合はクリックで実行されるfunctionの処理が完了するとselectIDは削除されるため、情報は記憶できません。結果として選択肢をクリックしても前回の選択肢が解除されずラジオボタンとして機能しません。

初心者にとっては分かりにくい仕様かもしれませんが、この仕組みによって役目が終わった変数がいつまでも残るのを防いでいます。もし情報の記憶に利用したい場合は、サンプルradio2/04.htmlの様に利用するfunctionの外で定義するようにしましょう。

情報を記憶する位置

クリックされた情報を記憶する処理（つまりselectID = this.id）の位置には気を付けなくてはいけません。情報を記憶するのは、記憶した情報を利用した「後」でなければなりません。以下にサンプル（radio2/04.html）のラジオボタンの処理を記していますが、記憶した情報「selectID」を利用しているのは3行目の部分です。この後で情報の記憶を行います（以下の4行目）。

$("ul>li").click(function (){
	$(this).addClass("selected");
	$("#" + selectID).removeClass("selected");
	selectID = this.id;
});

もし順番を間違えると機能しません。サンプル（radio2/test02.html）では以下の様に順番を入れ換えています。結果として選択肢をクリックしても選択状態になりません。

$("ul>li").click(function (){
	$(this).addClass("selected");
	selectID = this.id;
	$("#" + selectID).removeClass("selected");
});

なぜ選択されないかというと、3行目でクリックされた要素のidを変数「selectID」に代入しているので、4行目ではクリックされた要素からselectedのクラスを外してしまいます。せっかく2行目でselectedのクラスを付けたのに4行目で外してしまうため、選択されなかったのです。情報を記憶する順番には気を付けましょう。

これでラジオボタンの選択肢は完成しました。しかし診断系コンテンツでは、複数の選択肢（ラジオボタン）が必要になります。次回は複数のラジオボタンの作成法について説明します（たぶん、この章で最難関のページになると思います...）。

次のページ：選択肢の作成(3)