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

Question

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

我制作了一个 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";
}

Answer 1

提供的 fiddle 不起作用，因为您没有向我们提供函数 loadKeyWords()。

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

我不确定这是否会帮助您更接近于找到问题的真正根源。