Question

我有一个问题，我在for循环中和.bind（“load”） - 处理程序中使用.appendTo向div添加图像。我尝试了很多东西，但没有任何效果，它只显示最后的图片，而不是三张。代码非常简单，如下所示。

如果有人对我有所暗示，那就太棒了。在此先感谢！

var $images = ["https://static.pexels.com/photos/769986/pexels-photo-769986.jpeg", "https://static.pexels.com/photos/767907/pexels-photo-767907.jpeg", "https://static.pexels.com/photos/746759/pexels-photo-746759.png"];

var i,
  figure,
  img;

for (i = 0; i < $images.length; i += 1) {

  figure = $('<figure />');
  img = $('<img />');

  img.attr("src", $images[i]);

  img.unbind("load");
  img.bind("load", function() {

    a = $('<a>', {
      href: this.src,
      itemprop: "contentUrl",
      'data-size': this.width + "x" + this.height
    });

    img.appendTo(a);
    a.appendTo(figure);
    figure.appendTo('#gallery-panel');
  });
}

img {
  width: 10em;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div id="gallery-panel"></div>
</body>

</html>

Answer 1

变化：

img.appendTo(a);

为：

$(this).appendTo(a);

您已进入Javascript infamous Loop issue?，因为所有关闭都使用相同的img变量。

.appendTo在.bind（加载）中不起作用 - jQuery

1 个答案: