[选择复选框时如何克隆元素

Question

我有一个包含元素的页面

<div class="sample-area-wrapper border-bottom-block">
    <div class="samples-items-wrapper">
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image1.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image1.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="selected-items"></div>

帮助实现功能。如果选择，

<input type="checkbox" />

复制sample-item-wrapper整个块并将其添加到

selected-items

适用于剔除和jQuery的实现

我尝试过，但是失败了。我正在寻找其他尝试与代码集成的其他方式，但没有任何效果

<div class="selected">

</div>

<script>
    require([
        'jquery'
    ], function ($) {
        'use strict';
        $(":checkbox").change(function() {
            var arr = $(":checkbox:checked").map(function() { return $(this).next().html(); }).get();
            $(".selected").html(arr.join(', '));
        });

        function ToggleBGColour(item) {
            var td = $(item).parent();
            if (td.is('.rowSelected'))
                td.removeClass("rowSelected");
            else
                td.addClass("rowSelected");
        }

    });
</script>

这项工作，但添加了错误的元素来阻止

Answer 1

您可以使用closest方法获取内容，而只需使用.html将内容附加到所选部分。

您可以使用clone方法来获取整个元素。

Answer 2

我尝试过此方法，它可以工作，但是添加了错误的元素：

var arr = $(":checkbox:checked").map(function() { return $(this).next().html(); }).get();