読みやすいコードにしたい

Question

ここに質問したいことを詳細に書いてください

エリアを２つに分けたとして、片方のエリア(アイテム)に設置したある画像をクリックするともう片方のエリア(canvas)に少し大きなサイズの同じ画像を描画しようと考えています。

画像の数が増えた場合の事を考えて、配列や関数を使い同じ処理を行わないようにしたいと思っています。

###発生している問題・エラーメッセージ
エラーは特に起こっていません。

###該当のソースコード

<div id="container">

<!--canvasエリア -->
  <canvas id="canvas"></canvas>

<!--アイテム -->
  <div id="item">
    <img class="imgs" id="img01" src="xxx/thum/01.jpg" alt="サムネ01">
    <img class="imgs" id="img02" src="xxx/thum/02.jpg" alt="サムネ02">
  </div>

スクリプト

$(function() {
var canvas = $('#canvas')[0];
var context = canvas.getContext("2d");

var imgList = new Array(
      "xxx/01.jpg",
      "xxx/02.jpg"
    );

    $('.imgs').each(function() {
      var img = $(this);
      img.click = targetImage;
    })

    function targetImage () {
      for(var i=0; i<imgList.length; i++) {
context.drawImage(imgList[i], 10, 10);
}
}
}

###試したこと

片方のエリア(アイテム)にある画像それぞれにクリックイベントを指定すればcavasに描画する事までは出来ました。

var item = $('#item');
var img01 = item.find('#img01');

var image = new Image();
image.src = "xxx/01.jpg";

img01.click(function() {
        context.drawImage(image, 10, 10);
      })

###補足情報(言語/FW/ツール等のバージョンなど)
配列への変換がおかしいのか、関数化に失敗しているのか原因が突き止められず非常に悔しいです。
お力をお貸し下さい。宜しくお願い致します。

Comments

[退会済みユーザー]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

$(function() {
	var canvas = $('#canvas')[0];
	var context = canvas.getContext("2d");

	// サムネイルのid → canvasに表示する画像のsrcへのマップ
	var imgMap = {
		"img01" : "img/01.jpg",
		"img02" : "img/02.jpg"
	};

	$('.imgs').on('click', function() {
		// サムネイルのidを取得
		var thumbnailId = $(this).attr('id');
		// サムネイルのidからcanvasに表示する画像のsrcに変換
		var imgSrc = imgMap[thumbnailId];

		var image = new Image();
		image.src = imgSrc;
		context.drawImage(image, 10, 10);
	});
});

Comments

[squee]

解決して頂きありがとうございました。
naomi3様のコードを実際に書いて、思い通りの実行結果も得られました。
ずっと悩んでいたので、teratailを使ってみて本当に良かったです。

手元にある参考書に、「それぞれについて処理をする」というeachメソッドに関する記載が
あったので試してみましたが、eachメソッドでは出来ないようですね。

ソースコードのロジックを勉強させて頂き、自分のものに出来るようにします。
ありがとうございました。