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

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

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

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

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

Answer 2

使用closest：

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

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

2 个答案: