时间戳

首页 > 解决方案 > 如何在 Click 功能上克隆项目？

javascript - 如何在 Click 功能上克隆项目？

问题描述

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

这是我的 jsFiddle 代码jsFiddle 演示

现在，当我尝试将所有元素克隆到<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>克隆标签中删除。

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

标签： javascriptjqueryfunctiononclicklocal-storage

解决方案

你可以做这样的事情

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

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

推荐阅读