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

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

結果画面の作成(1)

概要

結果に応じて要素を変更する

前回作成した得点の配列resultArray(高得点順にソート)を利用して結果画面を作成します。前回に比べ内容は簡単なのですが、処理内容が多いため今回と次回の2回に分けます。今回は製品名と製品画像、得点バーと得点の4点を作成します。

結果画面の作成といってもappendメソッドなどで要素を追加するのではなく、 attrメソッドなどで内容を変更するだけです。この方法であれば、最初に「構成の確認」で作成したように、仮の結果画面でレイアウト(cssの設定)がしやすいのです。

今回変更する部分を画像で説明したので解説に入る前に確認してください。→今回変更する部分の説明画像

解説

結果画面の1位〜3位の構成を確認

まずは結果画面の確認をしておきましょう。第1回目(構成の確認)のjQueryを設定する前のサンプル(intro/02.html)を開いてページを確認してください。1位〜3位は製品を大きく扱うのですが、まずは製品名と製品画像の部分を変更します。

ソースを開いて1位の部分を確認してください。各順位のエリアはid属性が「no + 順位」のdiv要素で設定されています(1位のエリアは以下1行目のようにid属性「no1」のdiv要素です)。
下表は見やすくするため、ソースの一部を省略し改行を追加しています

<div class="productL" id="no1">
<div class="profile">
<img src="../images/no1.jpg" width="51" height="65" alt="1位">
<img class="rName" src="../images/nameL_tap.gif" width="490" height="42">
<img src="../images/score.gif" width="51" height="17" alt="score">
<img class="rBar" src="../images/bar.gif" width="300" height="17">
<div class="scoreText">170点</div>
・(途中省略)・
<a href="#" class="rLink" target="_blank">
	<img class="rPhoto" src="../images/photo_tap.jpg" width="184" height="129" alt="">
</a>

まず製品名は4行目、rNameのクラス属性をもつimg要素で設定されています。このimg要素のsrc属性を変更することで画像を差し換えます。そして製品画像は10行目のrPhotoのクラス属性を持つimg要素のsrc属性を変更することで差し換えます。

結果画面に切り替える

ではjQueryを追加していきましょう。サンプル(result1/01.html)を開いてcalcFuncの最後に以下の処理が追加されているのを確認して下さい。前項で作成したソートした配列を引数でresultFuncに送っています。

//---結果画面を作成
resultFunc(resultArray);

resultFuncは以下の様に記述され、質問画面(id属性checker)をスライドアップして消し、結果画面(id属性result)をスライドダウンして表示します。

//---結果画面を作成
function resultFunc(resultArray){
	//---結果画面に切替
	$("#checker").slideUp();
	$("#result").slideDown();
}

結果として、全ての質問に回答して「製品を選ぶ」ボタンをクリックすると結果画面に切り替わります。

結果画面1位〜3位の画像を変更する

では画像を変更していきます。サンプル(result1/02.html)を開いてresultFuncに以下の処理が追加されていることを確認してください。まずは分かりやすいようにfor文を利用せずに記述しました。画像の変更はimg要素のsrc属性をattrメソッドを利用して変更することで実現します。

var myData = resultArray[0];//---1位の情報を取得
$("#no1 .rPhoto").attr("src", "../images/photo_" + myData[0] + ".jpg");
$("#no1 .rName").attr("src", "../images/nameL_" + myData[0] + ".gif");			
var myData = resultArray[1];//---2位の情報を取得
$("#no2 .rPhoto").attr("src", "../images/photo_" + myData[0] + ".jpg");
$("#no2 .rName").attr("src", "../images/nameL_" + myData[0] + ".gif");
var myData = resultArray[2];//---3位の情報を取得
$("#no3 .rPhoto").attr("src", "../images/photo_" + myData[0] + ".jpg");
$("#no3 .rName").attr("src", "../images/nameL_" + myData[0] + ".gif");

まず1行目、4行目、7行目を確認して下さい。resultArrayは前回、高得点順にソートしていますから、0番目が1位の情報、1番目が2位の情報、2番目が3位の情報となっています。取得した情報は配列myDataに代入して2,3行目などで利用しています。例えば全て左側の選択肢を選んだ場合、1位はLシリーズで88点となるため、myDataは["l",88]となります。

今回は画像を変更するためmyDataの0番目の要素(上の例では"l")を取得して、これを基にimg要素のsrc属性を変更します。このサンプルでは画像のファイル名はcsvから取得した名前に合わせて命名する必要があります。つまりdata.csvの1行目の製品名に沿って命名します。このサンプルでは製品画像は「photo_ + 製品名 + .jpg」と名付け、製品名の画像は「nameL_ + 製品名 + .gif」と名付けています。
→例:photo_l.jpgphoto_t.jpgphoto_duo.jpgnameL_l.gifnameL_t.gifnameL_duo.gif

結果として全て左側の選択肢を選んだ場合、1位から順に「Lシリーズ」「Tシリーズ」「Duo11」の順に製品名と製品画像が変更されます。

仕組みを確認したところで、短く記述するためにfor文を利用します。サンプル(result1/02b.html)を開いてresultFuncが以下の様に変更されているのを確認して下さい。

for (var i=1; i<=3; i++){//---iは1〜3になります
	var myData = resultArray[i-1];//---配列は0から始まるので1引くことに注意
	$("#no" +i+ " .rPhoto").attr("src", "../images/photo_" + myData[0] + ".jpg");
	$("#no" +i+ " .rName").attr("src", "../images/nameL_" + myData[0] + ".gif");
}

まず1行目のfor文で変数iを1〜3まで繰り返すようにしています。この変数iを利用して2行目で情報を取得するのですが、配列は0番目から始まるので1引くことに注意してください。そして3行目、4行目でセレクタの部分に変数iを利用して1位〜3位の要素を変更するようにしています。

結果としてサンプルresult1/02.htmlと同じ処理を短く記述することができます。続いて得点バーと得点を書き換えましょう。

得点バーと得点の書き換え

再び第1回目(構成の確認)のjQueryを設定する前のサンプル(intro/02.html)を開いてbody内の構成をしてください。 得点バーは6行目のclass属性rBarのimg要素で表示され、幅(width属性)を変更することで長さを変更することができます。また得点は7行目のclass属性scoreTextのdiv要素で設定されています。
下表は見やすくするため、ソースの一部を省略し改行を追加しています

<div class="productL" id="no1">
<div class="profile">
<img src="../images/no1.jpg" width="51" height="65" alt="1位">
<img class="rName" src="../images/nameL_tap.gif" width="490" height="42">
<img src="../images/score.gif" width="51" height="17" alt="score">
<img class="rBar" src="../images/bar.gif" width="300" height="17">
<div class="scoreText">170点</div>
・(途中省略)・
<a href="#" class="rLink" target="_blank">
	<img class="rPhoto" src="../images/photo_tap.jpg" width="184" height="129" alt="">
</a>

ではjQueryを確認しましょう。サンプル(result1/03.html)を開いてresultFunc内のfor内に2行追加されているのを確認して下さい(下表の5,6行)。考え方は前項と同じでfor文を利用して1〜3位を効率よく設定しています。そして得点データは前項のmyData[0]と異なり、myDataの1番目に格納されているのでmyData[1]となることに注意してください

for (var i=1; i<=3; i++){
	var myData = resultArray[i-1];
	$("#no" +i+ " .rPhoto").attr("src", "../images/photo_" + myData[0] + ".jpg");
	$("#no" +i+ " .rName").attr("src", "../images/nameL_" + myData[0] + ".gif");
	$("#no" +i+ " .rBar").width(myData[1]*3);//---バーの幅を設定
	$("#no" +i+ " .scoreText").text(myData[1]+ "点");//---得点の設定
}

5行目で変数iで指定された順番のclass属性rBarの要素に対し、widthメソッドを利用して得点バーの長さを変更しています。また得点データ(myData[1])を直接幅に利用すると短いため3をかけて利用しています。

そして6行目では、変数iで指定された順番のclass属性scoreTextの要素に対し、textメソッドを利用して得点を設定しています。次の項では4〜6位の設定をしますが、1〜3位と同じ考え方で対応できます。

4位〜6位の設定

4位から6位の設定もほとんど同じです。これまでと同じように第1回目(構成の確認)のjQueryを設定する前のサンプル(intro/02.html)を開いてソースを確認して下さい。
下表は見やすくするため、ソースの一部を省略し改行を追加しています

まず1位から3位と同じように、id属性が「no + 順位」のdiv要素で設定されています(以下は4位の部分なのでid属性がno4となっています)。

<div class="productS" id="no4">
	<img src="../images/no4.gif" width="52" height="50" alt="4位">
	<img class="rName" src="../images/nameS_l.gif" width="400" height="27">
	<img src="../images/score_s.gif" width="51" height="12" alt="score">
	<img class="rBar" src="../images/bar_s.gif" width="120" height="12">
	<div class="scoreTextS">120点</div>
</div>

4位から6位の製品は扱いが小さいため3箇所しか変更しません。3行目で製品名を変更します。1位から3位の時と同じようにclass属性rNameのimg要素のsrc属性を変更します。そして5位の得点バーと6行目の得点の部分も1位から3位の時と同じようにclass属性が設定されています。

classの設定が同じなのでjQueryもほとんど同じになります。サンプル(result1/04.html)を開いてresultFunc内に以下のfor文が追加されているのを確認して下さい。

//---4位から6位の情報を表示
for (var i=4; i<=6; i++){
	var myData = resultArray[i-1];
	$("#no" +i+ " .rName").attr("src", "../images/nameS_" + myData[0] + ".gif");
	$("#no" +i+ " .rBar").width(myData[1]*3);
	$("#no" +i+ " .scoreTextS").text(myData[1]+ "点");
}

まず1行目のfor文で変数iは4から6まで繰り返すことに注意してください。これでid属性がno4からno6までの要素を変更できます。あとは1位から3位のときと同じように変更するだけです(同じなので説明は省略します)。

製品名は1位から3位のものと比較して小さい画像を用意しました。画像のファイル名は「nameS_ + 製品名 + .gif」と「L」の部分が「S」に変更されています。
→例:nameS_l.gifnameS_t.gifnameS_duo.gif

次回は1位から3位の説明文と画像のリンク先を設定するのですが、これらはクライアント(お客さん)が変更しやすいようにcsvデータを利用するようにします。