Javascript 克隆/附加会影响错误的图像或所有图像答案

【问题标题】：Javascript clone/append either affects the wrong image or all imagesJavascript 克隆/附加会影响错误的图像或所有图像
【发布时间】：2019-03-21 01:14:09
【问题描述】：

我有一个非常基本的函数，可以根据搜索输入获取图像结果集

function appendSomeItems(url, id, name, style) {
  return '<div><div class="md-card md-card-hover"><div class="gallery_grid_item md-card-content getImage"> <img class ="uk-align-center imageClick"></a><div class="gallery_grid_image_caption"> <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';
}

这工作得很好，它在另一个函数中被调用，该函数基本上从结果集中获取多达 10 张图像并将它们附加到一个 div 中。

我有另一个功能，我正在单击一个图像，我希望该特定图像克隆并附加到另一个 div。问题是，使用类 imageClick 它将所有图像克隆并附加到新的 div 中。如果我将 imageClick 更改为 ID，那么它只会克隆/附加集合中的第一个。

如何将其更改为仅克隆并附加单击的图像？

$(document).on('click', '.imageClick', function handleImage() {
  console.log('good');
  var img = $(".getImage").children("img").clone();
  $("#holdImage").append(img);
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

在$(this) 上尝试.closest() 以仅定位当前点击的图片：

var img = $(this).closets(".getImage").children("img").clone();

您当前的 HTML 表明您只有一个要克隆的图像元素。在这种情况下，寻找孩子是没有意义的。只需克隆$(this) 就足够了：

var img = $(this).clone();

【讨论】：

谢谢你，这似乎有效！我唯一的问题：每次单击新图像都会将图像附加到另一个图像上。有没有办法让这个工作，如果图像 a 已经附加，但我点击图像 b，那么它会用 b 替换 a？
@TomN., 你想在点击新创建的图片时阻止添加图片吗？
我想添加任何被点击的图像，但如果一个已经附加到#holdImage，那么我想用刚刚点击的图像替换它。换句话说，我一次只想要一张图片在#holdImage 中
@TomN.，您可以在添加之前使用$("#holdImage").html(''); 清除 html....
@TomN.，不客气，顺便说一句，您也可以在附加之前仅删除特定元素，如 $("#holdImage .imageClick").remove();...:)

【解决方案2】：

使用closest:

var img = $(this).closest(".getImage").children("img").clone(true);

【讨论】：

我相信这实际上正在工作。似乎每次点击都会附加，是否没有默认替换最后一个？因此，如果我单击图像 A 并附加，然后单击图像 B 它会删除 A 并附加 B？