如何克隆点击功能上的项目？

Question

我用本地存储创建了一些元素，它工作正常，但我希望这些项目也应该被克隆到特定的 div 标签。

这是我的 jsFidddle 代码 jsFiddle Demo

现在，当我尝试将所有元素克隆到 <div class="all-items"></div> 但它不起作用时下面是我的代码

 $(function() {
  $('.mix').click(function() {
    $(this).toggleClass('selected')
    window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('selected'));
  });

  $('.mix').each(function() {
    var id = 'test' + this.dataset.id;
    if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
      $(this).addClass('selected');
    }
        });
  $(document).ready(function() {
    var e = $('.top-items');
    for (var i = 0; i < 5; i++) {
      e.clone().insertAfter(e);
    }
});

HTML 在这里

<div class="top-items">
<div data-id="1" class="box p001 mix ">Div 1</div>
<div data-id="2" class="box p002 mix">Div 2</div>
<div data-id="3" class="box p002 mix">Div 2</div>
<div data-id="4" class="box p002 mix">Div 2</div>
<div data-id="5" class="box p002 mix">Div 2</div>
</div>

<div class="all-items"></div> //all elements should be clone here on click one by one

为了实现这一点，我尝试了点击功能，但它没有提供完美的解决方案，因此我希望在添加元素时应该从这个 <div class="all-items"></div> 克隆标签中删除 onclick。

非常感谢任何帮助或建议。

Answer 1

你可以这样做

let topItemsHTML = $(".top-items").html()
$(".top-items").html("");  // clear top-items div

$(".all-items").html(topItemsHTML)  // fill all-items with top-items

如何克隆点击功能上的项目？

How to Clone items on Click function?

javascript

jquery

function

onclick

local-storage