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

このエントリーをはてなブックマークに追加
索引
1章:短編集
2章:診断系コンテンツ
3章:製品抽出系コンテンツ
番外:Simulation Game

回答の確認

概要

選択肢の仕組みは診断系コンテンツと同じ

選択肢(ラジオボタン)の仕組みは診断系コンテンツ:選択肢の作成(3)と同じなので簡単な解説だけにします(忘れてしまった方は復習してから読み進めて下さい)。ここでは選択肢の作成の他に、すべての質問に回答したら「製品を探す」ボタンをクリックできるようにすることを学びます。
htmlやcssは前回のintro/04.htmlから変更していません。

解説

ラジオボタンの確認

サンプル(radio/01.html)を開いてjQueryを確認して下さい。すでに診断系で説明したテクニックなので簡単な説明に留めます。 このラジオボタンの処理は診断系コンテンツ:選択肢の作成(3)で説明したサンプルと変数名も同じになっているので理解しやすいと思います。

var selectArray = [-1,-1,-1,-1,-1];		
function quesFunc(){
	var idArray = this.id.split("_");
	var qID = Number(idArray[0]);
	var ansID = Number(idArray[1]);
	var selectID = selectArray[qID];
	if (ansID == selectID) return;
	$("#" + qID + "_" + ansID).addClass("selected");
	$("#" + qID + "_" + selectID).removeClass("selected");
	selectArray[qID] = ansID;
}
$(function () {
	$("#result").hide();
	$("ul>li").click(quesFunc);
});

まず1行目では回答した選択肢の情報を格納する配列を作成しています。各要素は選択肢に存在しない(選択肢のidは0から)-1を初期値として設定しておきます。これは後で全ての質問に回答したかを確認する処理に利用します。つまり-1が1つも無ければ全てに回答したことになります

続いて14行目を確認して下さい。ここでul要素内のli要素(つまり選択肢)のクリック処理を設定し、クリックされたらquesFuncを実行するようになっています。

ラジオボタンの処理はquesFunc(3〜10行目)だけで実行され、診断系コンテンツと同じ仕組みになっています。まず3行目でクリックされた選択肢からid属性の取得し、4行目で質問のID、5行目で選択肢のIDに分離してます。この情報を基に6行目で、配列selectArrayに情報を設定します。

ラジオボタンでは同じ選択肢がクリックされても意味が無いので、同じ選択肢がクリックされた場合は処理しないようにします。その部分が6〜7行目です。

6行目でselectArrayから、その質問IDで回答された選択肢のIDを取得して変数selectIDに代入しています。つまり、この情報は過去に選択された選択肢の情報です(初回は選択されていないので-1)。

7行目で、このselectIDの値と、現在クリックされた選択肢のIDであるansIDを比較して、同じであればreturnを実行してfunctionを抜けて処理を停止します。

8行目で今回選択された要素にselectedのクラスを付加して、9行目で前回選択した要素からselectedのクラスを外しています。そして最後に今回選択したIDを配列selectArrayに記憶させて終わりです。
より詳しい説明が必要な場合は診断系コンテンツ:選択肢の作成(3)を復習して下さい。

全ての質問に回答したかを確認

サンプル(radio/02.html)を開いて、前項で紹介したquesFuncの最後に以下の処理が追加されていることを確認して下さい。if文の条件式がtrueだったらaddclassメソッドを利用して、id属性がsearchButtonの要素(つまり「製品を探す」ボタン)にactiveのclass属性を付加します。active属性のclassについては最後に説明します。

//---回答をチェック
if (checkFunc()){
	$("#searchButton").addClass("active");
}

今回のポイントはif文の()内に設定されたcheckFunc()です。※()を忘れないようにして下さい。
条件式には、このようにfunctionを設定することも可能です。というかtrue/faleseになるものであれば何でも利用できます

ではcheckFuncの内容を確認します。シンプルな処理ですが、プログラムになれてない方には難しく感じるかもしれません。まずif文の条件式として利用するので、trueかfalseを返さなければなりません(下表では3行目と5行目)。

function checkFunc(){
	for (var i in selectArray) {
		if (selectArray[i] == -1) return false
	}
	return true;
}

2行目のfor文で回答を記憶させている配列selectArrayの要素数だけ処理を繰り返すようにしています。繰り返す処理は3行目の、if文で配列の要素が-1か否か調べることです。もし-1であればfalseを返すようにします。もし1つも-1が無い場合はfor文を抜けて5行目の処理が実行されるためtrueが返ります。

つまりcheckFuncの機能とは「回答されていない(IDが-1)の質問がある場合はfalseを返し、そうでなければ(つまり全て回答されていれば)trueを返す」となります。

checkFuncはquesFuncの最後で実行されているので、選択肢をクリックされる度に実行されます。実際に全ての質問に回答して「製品を探す」ボタンがアクティブになることを確認して下さい。

「製品を探す」ボタンのcssについて

アクティブになった「製品を探す」ボタンにマウスオーバーすると画像が切り替わりますが、これはjQueryで実現しているのではなくcssによるものです。product.cssで関連する部分を下に抜き出しました。

#searchButton{
	margin:20px 0px 0px 0px;
	width:750px;
	height:55px;
	background: url(images/searchButton.gif) no-repeat 0 0;
}
#searchButton.active{
	background-position: 0px -60px;
	cursor:pointer;
}
#searchButton.active:hover{
	background-position: 0px -120px;
}

7〜10行目の設定で、id属性がsearchButtonの要素にactiveのclass属性が付加されたら背景画像の位置が切り替わり、マウスオーバー時にカーソルが指になるようにしました。その結果、全ての過失問に回答するとボタンの画像が切り替わったのです。

さらに11行目の設定を確認して下さい。activeのclass属性が付加された要素にマウスオーバーしたら、背景画像をさらに切り替えるようにしています。その結果、アクティブになったボタンにマウスオーバーすると画像が切り替わるのです。jQueryだけでも可能ですが、cssを組みあわせることで、よりシンプルに記述できる場合があるのです。

次回は選択肢の得点表の作成について説明します。この先から難易度が急に上がっていきます...。