Question

我正在尝试建立一个简单的示例，其中有一行圆形图像。如果有人单击圆形图像，它将在圆形图像下方连续生成一个正方形图像。单击生成的正方形图像时，它将在上面的圆圈行中生成一个圆圈图像。

我尝试设置一个appendto函数，该函数可在单击圆形图像下方的行时生成方形图像。我一直找不到能使我将圆形图像生成回上一行的解决方案。

<head>
</head>
<html>
<body>
    <div class="circles-container">
        <div class="circles">
            <div class="circle-red circle">
                <img class="circle-red-img" src="images/red-cr.png">
                <span class="text-red">Red</span>
            </div>
       </div>
     </div>  
     <div class="squares-container">
        <div class="squares">
        </div>
     </div>
</body>
</html>

<script>

    $('.circle-red-img').click(function() {
        $('.squares').append('<div class="circle-red circle"><span class="text-red">Red</span><img class="square-red-img" src="images/red-sq.png"></div>');
        return false;
    });
    $('.square-red-img').click(function() {
        $('.circles').append('<div class="circle-red circle"><span class="text-red">Red</span><img class="square-red-img" src="images/red-sq.png"></div>');
        return false;
    });

</script>

上面的代码在某种程度上起作用。如果单击红色圆圈的图像，我可以将其添加到“ squares” div上。但是，如果我尝试使用相同的功能将内容附加到“圈子” div上，则它将不起作用。

有没有一种方法可以使由appendto函数创建的html单击以添加内容？

0 个答案: