如何修复附加功能的 onClick 按钮？

Question

我在这里做一个项目，我想在其中实现 open 和 close 按钮，但我做不到

目前，它是两者的关闭按钮，我需要添加单独的打开和关闭按钮，这样当用户点击打开时它就会打开，当有人点击关闭时它也应该在我连续点击时正确关闭关闭然后按钮冻结一段时间

请检查按钮无法正常工作的 js Fiddle 演示

这是代码

function createItem(item) {
  var elemId = item.data("id");
  var clonedItem = item.clone();
  var newItem = $(`<div data-id="${elemId}"></div>`);
  newItem.append(clonedItem);
  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");
  $(this).append(`<button class='close'>Close</button>`);
  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;
  margin: 5px;
  padding: 5px;
  background: #a5a5a5;
  float: left;
  text-align: center;
  cursor: pointer;
}

.productad {
  background: red;
  color: #eee
}

.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

<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>
<div class='item-append'>
</div>
<div class='count'>0</div>

非常感谢任何帮助或建议

Answer 1

要达到效果，您需要将打开按钮添加到 HTML 中，因为那将是静态的，然后当用户点击“打开”或关闭时在“打开”和“关闭”之间切换该项目，还需要修复本地存储，而不是在关闭按钮中删除，只需将值切换为 false 并根据该值进行验证。检查以下代码，看看这是否是您要查找的内容：

function createItem(item){
    var elemId = item.data("id");
    var clonedItem = item.clone();
    var newItem = $(`<div data-id="${elemId}"></div>`);
    newItem.append(clonedItem);
    clonedItem.children('.open').remove();
    clonedItem.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() {
  var id = $(this).data("id");
  var lsId = `test_${id}`;
  
  $(this).toggleClass('productad');
  
  if (!$(this).hasClass('productad')){
    window.localStorage.setItem(lsId, false);
    $(this).children(".open").html("Open");
    createItem($(this));
  }else{
    window.localStorage.setItem(lsId, true);
    $(this).children(".open").html("Close");
    $(`.item-append div[data-id='${id}']`).remove();
  }
  countSaveItems();
  
});

$('.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");
    window.localStorage.setItem(`test_${id}`, false);
    $(`.item-save[data-id='${id}']`).removeClass('productad');
    $(`.item-save[data-id='${id}']`).children(".open").html("Open");
    $(this).parent().parent().remove();
  countSaveItems();
});

.item-save {
  position: relative;
  display: block;
  font-size: 14px;
  margin: 5px;
  padding: 5px;
  background: #a5a5a5;
  float: left;
  text-align: center;
  cursor: pointer;
}

.productad {
  background: red;
  color: #eee
}

.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

<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 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='124'>
        Save2 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='125'>
        Save3 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='126'>
        Save4 <button class='open'>Open</button>
    </div>
</div>
<div class='item-append'></div>
<div class='count'>0</div>

如何修复附加功能的 onClick 按钮？

how to fix onClick button for append functions?

javascript

jquery

function

append

onclick