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

Question

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

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);
});

Answer 1

尝试 .closest()在 $(this) 上仅定位当前点击的图像:

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

您当前的 HTML 表明您只有一个要克隆的图像元素。在这种情况下找 child 是没有意义的。简单地克隆 $(this) 就足够了:

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