dojoを使用してプログラマティカルにイメージのリストを追加し、それぞれにclickイベントを追加します

Question

イメージのリストをロードして、Dojoを使用してイメージをクリックすると、そのイメージのID画像が表示されます。下記のコードをご覧ください。イメージが読み込まれましたが、それぞれをクリックすると、ログには「10143」のみが書き込まれました。何が起こったのか？助けてください！

var PictureIds = ['10141', '10142', '10143']; 
 
var resultUl = domConstruct.create('ul'); 
 
for (i = 0; i < PictureIds.length; i++){ 
 
    var image= domConstruct.create('img', { 
 
    id: PictureIds[i], 
 
    src: "./images/"+ PictureIds[i] + ".jpg", 
 
    class: "photo"}); 
 

 
    var li= domConstruct.create('li'); 
 
    domConstruct.place(image, li); 
 
    domConstruct.place(li, resultUl); 
 

 
    on(image, 'click', function(){ 
 
    console.log(image.id); 
 
    }); 
 
} 
 
domConstruct.place(resultUl,'pictures');

<div id="pictures"></div>

Answer 1

私はdojo/arrayの代わりに、forループを使用することをお勧めします。また、あなたのコードを一新してイメージを作成する必要があります。次にそれらを配列に追加し、それらの配列をdomに追加するためにループを作成します。

私は以下の例を挙げていますが、わかりやすくするために画像の代わりに段落タグを使用しています。 以下の例では私がやっていることをすることができますが、段落を作成する代わりにイメージを作成することができます。

例：https://jsfiddle.net/an90dr/493khnug/