как клонировать элемент при выборе флажка

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

Я попробовал это, и это работает, но добавляет неправильный элемент:

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

Если он выбирает неправильный элемент, то вам нужно изменить селектор на правильный элемент: in $(this).next().html(), this - это флажок, поэтому, чтобы получить «весь образец-упаковщик», вам нужно:

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

---

Чтобы взять весь образец-упаковщик (не только его содержание)

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

без .clone он переместит существующих элементов.

Answer 2

Вы можете использовать метод closest для получения содержимого и просто использовать .html для добавления содержимого в выбранный раздел.

Вы можете использовать метод clone для получения всего элемента.

РЕДАКТИРОВАТЬ

Здесь вы можете добавить некоторый идентификатор (например, is) к div, чтобы идентифицировать и удалить выбранные элементы из нижней части.

Поскольку в вашем случае здесь нет идентификатора, я использовал 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>