Question

我正在抓取当前DOM树中的所有图像。我将它们显示在我的自定义统一div中，并允许用户选择它们。

var allImgs = $('img');

allImgs.each(function (index) {
    var imgUrl = $(this).attr("src");
    var newImgTag = $('<img></img>');
    newImgTag.attr("src", imgUrl);
    newImgTag.attr("width", "100px");
    newImgTag.attr("height", "100px");

    $("#Image-Grid").append(newImgTag);  // this works

    newImgTag.click(function (event) {
        $('#Selected-Image').empty();
        $('#Selected-Image').append(newImgTag);   // this doesn`t work why????
    });
});

我可以将所有图像显示到我的统一div中。但是，当我从统一div中选择一张图片时。图像无法正常显示。

例如，我随机选择一个时尚网站。 http://www.abercrombie.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10901&storeId=10051&langId=-1&categoryId=12266&parentCategoryId=%5bLjava.lang.String%3b%403dc73dc7&topCategoryId=12203&productId=1014475

当我选择其中一张图片时，我注意到，图片的src链接是这样的 /anf/50817/img/global/logo-print.png

为什么我不能在点击事件中稍后显示图片？

Answer 1

newImgTag.click(function (event) {
        $('#Selected-Image').empty();
        $(this).clone().appendTo('#Selected-Image');
});

文档：

http://api.jquery.com/clone/

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

（...）如.append（）的讨论中所示，通常当元素插入DOM中的某个位置时，它会从旧位置移动。所以，鉴于代码：

$('.hello').appendTo('.goodbye');

生成的DOM结构将是：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

为了防止这种情况而是创建元素的副本，您可以编写以下内容：

$('.hello').clone().appendTo('.goodbye');

这会产生：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

为什么我不能延迟图像的填充？

1 个答案: