javascript - 如何在附加项目中添加关闭按钮?
问题描述
我在一个项目中工作,我使用 Localstorage 函数和克隆,它工作正常
但是问题是如何在 .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>
非常感谢任何形式的帮助或建议
解决方案
如果你检查你可以创建一个函数并在那里创建一个 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>
推荐阅读
- javascript - 如何使用 ES6 模块或任何其他非过时技术实现 Html Imports 替换
- wget - 如何使用 Wget 克隆/复制包含您的名称、服务器保留字符的文件到本地存储?
- objective-c - “/Volumes”名称是否会根据系统语言更改,如果是,如何调整?
- javafx - 鼠标进入或离开时对淡入/淡出过渡的不良影响
- dart - 如何从 Flutter 中的字符串中删除/检测整个表情符号?
- wordpress - 如何修复我的图像以便它们在 Internet Explorer 11 中显示
- python - 类型错误:不支持的操作数类型 [s] for -: 'list' 和 'int'
- marklogic - 如何查询 MarkLogic 以确定重新索引的成本?
- apache-kafka - “注册”是 Ksql 中的保留关键字,如果是,我如何选择具有该名称的字段
- javascript - 带有 EasyPieChart 和 Waypoint 的 JS 未执行