javascript - 从本地存储中检查时清除已检查的li元素

我在本地存储中有一个要打印到浏览器的数组。

我做了一个jsfiddle来显示我的代码结构here.

我试图使整个div可点击。换句话说，整个div单击时会更改颜色，但是我隐藏了实际的复选框。

然后，我添加了一个按钮，用于清除本地存储中数组中所有选中的项目。

这样做之后
快要工作了。如果没有剩下的关键字，它将仅重新加载数组中的关键字。因此，如果仅显示一个。然后我检查它，它将重新加载。但是，如果有两个被我选中，它将清除我单击的那个。知道为什么它总是保持一个吗？

我正在加载这样的关键字，

$('#keyWords').prepend('<li class="list-group-item" data-style="button"><input id="'+localArray[i]+'" class="check" name="check" type="checkbox"><label for="'+localArray[i]+'">'+localArray[i]+'</label></li>');

然后，我试图删除这样的关键字，

// Allows user to remove keywords from the locaStorage
$('#clearChecked').click(function() {
  currentArray = [];
  $('.check').each(function() {
    var $curr = $(this);
    if (!$curr.is(':checked')) {
      var value = $curr.parent().text();
      currentArray.push(value);
      localStorage.setItem('keyWords', JSON.stringify(currentArray));
      loadKeyWords();
    } else {
      $curr.parent().remove();
    }
  });

通过删除带有css的复选框，单击li后它不会变为活动状态吗？这是我能想到为什么它不起作用的唯一原因...在使整个div可单击之前，它已经起作用。

以防万一这是我添加的css。

label {
display:block;
line-height:40px;
height:40px;
width: 520px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}

input[type=checkbox] {
display: none;
}

input:checked + label {
color: #F00;
}

input:checked + label:before {
content: "\2713";
}

最佳答案

提供的小提琴无法正常工作，因为您没有为我们提供功能loadKeyWords（）。

话虽如此，看起来您正在将整个列表重写到每个循环内部的存储中。这没有任何意义，因为您想将所有选项加载到数组中，然后在循环后设置一次该值。

我不确定这是否可以帮助您更进一步地找到问题的真正根源。