如何为 jquery 中的每个元素分别制作克隆，我在 foreach 循环 php 中从数据库中获取这些元素

Question

我在 jquery 中克隆时遇到一些问题..

我有一些图像是从数据库中获取的，现在可以在 foreach 循环中的页面中使用。我将它们显示在 ul > li 中。

现在我想应用 jquery 的 .clone 函数（每个图像单独）。所以当我点击任何图片时，它的克隆应该出现。

现在的问题是，当我单击任何图像时，jquery 正在为所有图像制作克隆。因为所有图像的 class 都是相同的.. 这是我的代码

<?php 
$image = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg";

$image = explode(",", $image);
?>
<html>
    <head>

    <link rel="stylesheet" href="../css/style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
        $(this).click(function(){
            $(".my_image").clone().appendTo(".block");
        });
    });
    </script>

    </head>
    <body>

<div class="library">
    <ul>
    <?php
        foreach ($image as $key => $img) {
            echo "<li><img class='my_image' src='assets/$img'></li>";
        }
    ?>

    </ul>
</div>

<div class="block"></div>


    </body>
</html>

Answer 1

当您调用 $(document).ready(...) 并且您在回调函数中使用的第一件事是 $(this)... 使用 $(this) 您指的是文档本身。你应该试试这个：

<script>
$(document).ready(function(){
    $(".my_image").click(function(){
        $(this).clone().appendTo(".block");
    });
});
</script>

如何为 jquery 中的每个元素分别制作克隆，我在 foreach 循环 php 中从数据库中获取这些元素

How to make clone separately for each element in jquery, which i fetch from database in foreach loop php

html

php

jquery

clone