我在一個專案中使用 Localstorage 函式和 clone 并且它作業正常
但問題是如何在.count類中添加數字增量，就像我點擊save1 save2 save3然后顯示的總數計數<div class='count'>3</div>
這是我的代碼
任何形式的幫助或建議都非常感謝
uj5u.com熱心網友回復：
如果您檢查您可以創建一個函式并在那里創建一個 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315390.html
標籤：javascript 查询 功能 点击 附加
上一篇：選中多個復選框時如何顯示div？