使用 jquery 更改复选框时如何克隆相似元素？

Question

我目前有很多项目，每个项目里面都有一个数据列表。我想要实现的是，当我 select 具有与 itemName 相同匹配属性的复选框时，包含附加数据的匹配 div 被附加到容器。我在这里写了一些代码：

<div class="item" itemName="itemOne">
    <h2> Item One </h2>
    <ul>
        <li> Data 1 </li>
        <li> Data 2 </li>
        <li> Data 3 </li>
    </ul>
</div>
<div class="item" itemName="itemTwo">
    <h2> Item Two </h2>
    <ul>
        <li> Data 1 </li>
        <li> Data 2 </li>
        <li> Data 3 </li>
    </ul>
</div>
<ul class="itemSelection">
    <li itemName="itemOne">
        <label><input type="checkbox"/>Item One</label>
    </li>
    <li itemName="itemTwo">
        <label><input type="checkbox"/>Item Two</label>
    </li>
</ul>
<div id="container"></div>

如有任何帮助，我们将不胜感激。

Answer 1

您需要检查复选框的状态。如果复选框是 checked 使用 .appendTo() to adding target element to #container and if it is unchecked use .remove() 删除它。

$(".itemSelection :checkbox").change(function(){
    var itemName = $(this).closest("li").attr("itemName");
    if (this.checked)
        $(".item[itemName=" + itemName + "]").clone().appendTo("#container");
    else
        $("#container .item[itemName=" + itemName + "]").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" itemName="itemOne">
    <h2> Item One </h2>
    <ul>
        <li> Data 1 </li>
        <li> Data 2 </li>
        <li> Data 3 </li>
    </ul>
</div>
<div class="item" itemName="itemTwo">
    <h2> Item Two </h2>
    <ul>
        <li> Data 1 </li>
        <li> Data 2 </li>
        <li> Data 3 </li>
    </ul>
</div>
<ul class="itemSelection">
    <li itemName="itemOne">
        <label><input type="checkbox"/>Item One</label>
    </li>
    <li itemName="itemTwo">
        <label><input type="checkbox"/>Item Two</label>
    </li>
</ul>
<div id="container"></div>

使用 jquery 更改复选框时如何克隆相似元素？

How to clone similar element when checkbox change using jquery?

html

javascript

checkbox

jquery

clone