掲示板の作り方#11 アイコン選択時の動きをつくる その2

こんにちは。Suipediaです(∩´∀｀)∩。

前回はブラウザ上でアイコンにマウスを乗せたとき/離したときの動きを実装しました。

今回はアイコンを選択したときの動きをやっていきます。ポイントは選択されたアイコンの情報をどうやって保持しておくか、です。選択された情報は送信ボタン押下時にサーバに送る必要がありますからね。

では、まいりましょーう|дﾟ)

今回のゴール

今回はアイコンをクリックしたときにクリックしたアイコンは不透明度1、それ以外のアイコンは不透明度0.4の状態で維持できるようにします。

あとは、内部の動きですが選択されたアイコンの情報を保持する仕組みを学びます。

アイコンクリック時の画面の動きをつくる

早速ですが、iconScript.phpの前回の続きの場所に以下のソースを貼ってください。

	/* クリック時 */
	$("input.icon").click(function(){
		for(var i = 1; i <= maxId; i++){
			if($(this).attr("id") != i){
				/* 選択されたアイコン以外 */
				$("#"+i).stop().animate({opacity: "0.4"}, 400);
			}else{
				$("#"+i).stop().animate({opacity: "1"}, 400);
			}
		}
		/* 選択値を保持 */
		$("#selectIconId").val($(this).attr("id"));
		$("#selectIconValue").val($(this).val());
	});

（全体を囲んでいる"});"の内側に入るように！--2020/06/23追記）

forループと中のif文については前回説明しているので、もういいかなと思います。

問題はその後の

/* 選択値を保持 */
$("#selectIconId").val($(this).attr("id"));
$("#selectIconValue").val($(this).val());

この部分です・・・！

ここの処理なんですが、コメントにつけた通り、選択値を保持するための処理です。

まずjQueryの記法として

$("セットするHTMLタグを指定する記載").val("ここに値");

こんな書き方でHTMLタグのvalue属性に値をもたせることができます。

画面上に入力枠をいくつか表示していますが、彼らもユーザの入力値をvalue属性にもつことができます。

だったらアイコンも同じようにすればいいのでは？

と思うのですが、仮に10個あるアイコンのうちのひとつに何か特定の値をもたせたとして、サーバに送る部分のプログラム（script）からすると

だからその特定の値をもったアイコンはどれなんだよ。

という話になるんです。

さっきみたいに一個ずつループで回して探すというのも一つの手です。ですが、今回は学習的な意味合いも込めて特定のHTMLタグに選択されたアイコンの情報を持たせる、という方法でいきます。

$("#selectIconId").val($(this).attr("id"));
$("#selectIconValue").val($(this).val());

この2行のソースから分かることは