使用jquery检测单击的元素并将其放在单独的div中

Question

我有几张图片，我希望在单击这些图片时将它们分别显示在一个较大的div中。 但是，我似乎无法找到一种方法来检测单击了哪个图像然后将其放置在div中。 如果有办法，请有人帮助。

Answer 1

您可以为图像分配类，然后在触发click事件后，使用其中的$（this）元素。 为每个图像分配相同的类将使事件“单击”将每个图像与您的类绑定，然后$（this）仅引用被单击的图像。

示例（正是您想要的）：

$(".myImages").click(function() {
  $(this).detach().appendTo('#finalContainer');
});

Answer 2

您需要使用jquery click函数并将其绑定到图像上，并执行on click函数中描述的操作。 http://api.jquery.com/click/

Answer 3

您可以像这样构造html：

<img src="1.jpg" class="thumbnails" alt="1">
<img src="2.jpg" class="thumbnails" alt="2">
<img src="3.jpg" class="thumbnails" alt="3">
<img src="4.jpg" class="thumbnails" alt="4">
<img src="5.jpg" class="thumbnails" alt="5">
<div class="largeImage"></div>

然后，此脚本将完成您的任务：

    $(".thumbnails").on("click",function(){
        $(".largeImage").css('background-image','url('+$(this).attr("src")+')')
    })