使用 Dojo 以编程方式添加图像列表并为每个图像添加点击事件

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/

使用 Dojo 以编程方式添加图像列表并为每个图像添加点击事件

using Dojo to programmaticaly add a list of images and add a click event for each of them

javascript

dojo

dom