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以编程方式添加图像列表并为每个图像添加单击事件

1 个答案: