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

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

I tried this and it works but adds the wrong element:
var arr = $(":checkbox:checked").map(function() { return $(this).next().html(); }).get();

如果它选择了错误的元素，那么您需要将选择器更改为正确的元素：在 $(this).next().html() 中，this 是复选框，因此要获得 "whole of sample-item-wrapper"，你需要：

 $(this).closest(".sample-item-wrapper").html()

获取整个 sample-item-wrapper（不仅仅是它的内容）

$(":checkbox:checked").each(function() {
    $(".selected").append($(this).closest(".sample-item-wrapper").clone());
});

没有 .clone 它将移动个现有元素。

Answer 2

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

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

编辑

您可以在此处向 div 添加一些标识符（例如 is），以从底部识别和删除所选项目。

由于您的情况此处没有标识符，我使用图像 URL 来唯一标识和删除复选框取消选中事件时的元素。

$('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $(".selected-items").append(($(this).closest(".sample-item-wrapper").clone()))
            }
            else if($(this).prop("checked") == false){
                var selected_item = $(this).closest(".sample-item-wrapper").attr('data-sample-id');
$("div.selected-items div[data-sample-id='"+selected_item+"']").remove()
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sample-area-wrapper border-bottom-block">
    <div class="samples-items-wrapper">
        <div class="sample-item-wrapper" data-sample-id="sample-1">
            <img src="https://i.picsum.photos/id/237/200/300.jpg" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper" data-sample-id="sample-2">
            <img src="https://i.picsum.photos/id/866/200/300.jpg" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

how to clone an element when choosing a checkbox

javascript

jquery

clone

append