如何在附加项目中添加关闭按钮？

Question

我在一个项目中使用 Localstorage 函数和 clone 并且它工作正常

但问题是如何在.count类中添加数字增量，就像我点击save1 save2 save3然后显示的总数计数像<div class='count'>3</div>

这是我的代码JsFiddle Demo 的演示

这是我下面的代码，我尝试添加 .count 系统以及所有附加元素，但我无法添加

 $('.item-all .item-save').click(function() { $(this).toggleClass('productad') window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('productad')); }); $('.item-all .item-save').each(function() { var id = 'test' + this.dataset.id; if (localStorage.getItem(id) && localStorage.getItem(id) == "true") { $(this).addClass('productad'); $(this).clone().appendTo('.item-append'); } }); $(".item-all .item-save").click(function() { var existing = $(".item-append [data-id=" + $(this).data("id") + "]"); if (existing.length > 0) existing.remove(); else $(this).clone().appendTo('.item-append'); }); $(".close").click(function() { localStorage.removeItem("'test' + this.dataset.id"), $(this).removeClass('productad'); });

 .item-save { position: relative; display: block; font-size: 14px; width:80px; margin: 5px; padding: 5px; background: #a5a5a5; text-align: center; cursor: pointer; } .item-all{display:flex} .productad{background:red;color:#eee}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='item-all'> <div class='item-save' data-id='123'> Save1 </div> <div class='item-save' data-id='124'> Save2 </div> <div class='item-save' data-id='125'> Save3 </div> <div class='item-save' data-id='126'> save4 </div> </div> <hr/> <div class='item-append'> <div class='count'>3</div> </div>

关闭按钮看起来像我需要的

任何形式的帮助或建议都非常感谢

Answer 1

如果您检查您可以创建一个函数并在那里创建一个 div 元素并附加克隆的项目并附加一个从代码创建的关闭按钮，那么您可以重用该函数从任何方法创建元素，您只需要传递选定的对象在“close”方法中，您可以使用函数“parent”来选择“div”父元素并从那里获取属性id，如下面的代码。

 function createItem(item){ var elemId = item.data("id"); var clonedItem = item.clone(); var newItem = $(`<div data-id="${elemId}"></div>`); newItem.append(clonedItem); newItem.append(`<button class='close'>Close</button>`) newItem.appendTo('.item-append'); } function countSaveItems(){ $('.count').html($(".item-append div.item-save[data-id]").length); } $('.item-all .item-save').click(function() { $(this).toggleClass('productad') window.localStorage.setItem('test_' + this.dataset.id, $(this).hasClass('productad')); }); $('.item-all .item-save').each(function() { var id = 'test_' + $(this).data("id"); // if (localStorage.getItem(id) && localStorage.getItem(id) == "true") { $(this).addClass('productad'); createItem($(this)); countSaveItems(); } }); $(".item-all .item-save").click(function() { var elemId = $(this).data("id"); var existing = $(`.item-append div[data-id="${elemId}"]`); if (existing.length > 0){ existing.remove(); }else{ createItem($(this)); } countSaveItems(); }); $(".item-append").on("click", ".close", function() { var id = $(this).parent().data("id"); localStorage.removeItem(`test_${id}`); $(`.item-save[data-id='${id}']`).removeClass('productad'); $(this).parent().remove(); countSaveItems(); } );

 .item-save { position: relative; display: block; font-size: 14px; width:80px; margin: 5px; padding: 5px; background: #a5a5a5; text-align: center; cursor: pointer; } .item-all{display:flex} .productad{background:red;color:#eee}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='item-all'> <div class='item-save' data-id='123'> Save1 </div> <div class='item-save' data-id='124'> Save2 </div> <div class='item-save' data-id='125'> Save3 </div> <div class='item-save' data-id='126'> save4 </div> </div> <hr/> <div class='item-append'> </div>