初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：短編集
2章：診断系コンテンツ
3章：製品抽出系コンテンツ
番外：Simulation Game

もう一度ボタン

概要

選択肢の解除やデータのリセット

もう一度診断をする場合には、選択した選択肢を解除し、配列に格納した選択肢のidや得点をリセットする必要があります。結果画面の設定はresultFuncが実行される時に再設定されるので、リセットする必要はありません。

解説

選択肢のリセット

ユーザーが選択した選択肢のidは配列「selectArray」に格納されていますから、この情報を基に選択肢をリセットします。サンプル（again/01.html）を開いてください。選択肢を確認しやすいように表示領域（id属性qArea）の要素を削除しています。

続いてjQueryを確認して下さい。readyイベント内に以下の処理が追加され、「もう一度」ボタンがクリックされたらagainFuncを実行するようにしてあります。 

$("#againButton").click(againFunc);//---もう一度ボタン

againFuncは以下の様に記述され、for inを利用して配列selectArray内のすべての要素を取得しています。取得されたidは4行目で変数selectIDに代入され、この情報を基に5行目で選択された選択肢を選び、removeClassメソッドを利用して選択された状態になるcss設定の「selected」を外し、元の状態に戻します。
for inで利用している変数iが、そのまま質問のidとして利用できるのがポイントです。 

//-----もう１度ボタンの処理
function againFunc(){
	for (var i in selectArray){
		var selectID = selectArray[i];
		$("#" + i + "_" + selectID).removeClass("selected");
	}
}

jQueryを確認したら、サンプルの選択肢を適当に選択してから結果画面の「もう一度診断する」ボタンをクリックして下さい。選択肢がリセットされるのを確認できます。

1問目に戻す

もう一度ボタンがクリックされたら1問目に戻さなければなりません。サンプル（again/02.html）を開いて、表示領域（id属性qArea）の要素を復活しているのを確認して下さい。jQuertでは以下の様に、againFuncの最初に1行追加されているのを確認して下さい。 

moveFunc(-1);//---最初の質問に戻す

質問の切替(1)で説明した座標の計算式と質問の切替(2)で作成したmoveFuncを思い出して下さい。最初の問題に戻すためには、表示したいページIDに0を設定するのですが、moveFuncでは以下の様に1足しているため、0にするためには引数として-1を渡す必要があるのです。 

function moveFunc(vol){
	var myPos = (vol+1) * -650;
	$("#qContainer").delay(500).animate({left: myPos},500);
}

結果としてmoveFuncの引数に-1を渡せば最初の問題に移動します。実際に「もう一度診断する」ボタンをクリックして最初の問題に戻ることを確認して下さい。

選択情報のリセット

「たまたま」前述のサンプルagain/02.htmlでは問題は発生しないのですが、通常「もう一度」行う場合は情報をリセットしなければいけません。診断系コンテンツであれば、選択肢を格納したselectArrayと得点を格納したscoreArrayです。

最後に「もう一度診断する」ボタンをクリックしたら情報をリセットするようにしましょう。
サンプル（again/03.html）をのソースを開いて、againFuncの最後に以下の処理が追加されていることを確認して下さい。選択肢のidを格納しているselectArrayと得点を格納しているscoreArrayを最初の状態に戻しています。追加する位置はagainFuncの最後にして下さい。何故なら選択肢をリセットする際にselectArrayを利用しているので、この処理の前でselectArrayをリセットすると選択肢がリセットできなくなってしまうためです。 

//---情報のリセット
selectArray = [-1,-1,-1,-1,-1];
scoreArray = [0,0,0,0,0];

これで処理的には完成なのですが、あまり良いスクリプトではありません。このサンプルでは質問が増えた時にselectArrayとscoreArrayを2ヶ所ずつ変更しなければならず、特にagainFunc内のselectArrayとscoreArrayは変更し忘れる可能性があります。

この様な場合は初期化の処理をfunctionにまとめて、「最初」と「もう一度診断する時」に実行するようにします。サンプル（again/03b.html）をのソースを開いて、最初に初期化用のfunction「initFunc」が作成されていることを確認して下さい。ここで各配列の初期設定を行っています。 

//-----初期設定
function initFunc(){
	selectArray = [-1,-1,-1,-1,-1];
	scoreArray = [0,0,0,0,0];
	qNum = selectArray.length;
}

続いて、どこでinitFuncを実行しているか確認します。まず最初に実行しなければならないのでreadyイベント内の最初に実行しています。 

$(function(){
	initFunc();//---初期化
	$.get("result.csv", function(myData){resultArray = myData.split("\r\n")});
	preloadFunc("images/lv0.png","images/lv1.png","images/lv2.png","images/lv3.png"
	$("ul>li").click(quesFunc);
	$("#againButton").click(againFunc);
});

そしてagainFuncの最後で実行しています。 

function againFunc(){
	moveFunc(-1);
	for (var i in selectArray){
		var selectID = selectArray[i];
		$("#" + i + "_" + selectID).removeClass("selected");
	}
	initFunc();//---初期化
}

これで質問数が変更になったなど、配列の変更が必要な時にinitFunc内だけを修正すればよいようになりました。これで診断系コンテンツの完成とします。引き続き3章の製品抽出に挑戦しましょう。