jQuery如果已单击链接，则从localstorage中删除项目

Question

我有一个页面，其中包含一些用于搜索结果的过滤器。这些过滤器是链接，单击后会将ID添加到localstorage。页面重新加载时，如果链接的ID存在，它将在localstorage中查找，它会修改该特定链接的CSS。我能够做到这一点。 现在，当再次单击同一链接时，我需要能够从本地存储中删除该链接的ID，以便在重新加载页面时不会更改CSS。

点击前

点击后

这是我的代码。来自StackOverflow的好心人帮助我将这段代码整合在一起。我需要扩展它。如果有任何疑问，请告诉我。很乐意重写我的句子。

$(document).ready(function() {
  //localStorage.clear();
  var cached = localStorage.getItem('filters');
  var filters = (cached) ? JSON.parse(cached) : {};
  for (id in filters) {
    $('#' + id).addClass('li-checked');
  }
  $('.li-filter').click(function(e) {
    //event.preventDefault();
    $(e.target).addClass('li-checked');
    $(e.target).removeClass('li-unchecked');
    var id = $(e.target).attr('id').toString();

    if (filters[id]) {
        filters[id] += 1;
      //filters = $.grep(filters, function(e) { return e.id!=id });

    } else {
        filters[id] = 1;

    }
    console.log(JSON.stringify(filters));
    localStorage.setItem('filters', JSON.stringify(filters));
  });
});

Answer 1

@Rohit如果我正确理解了您的问题，那么onclick您必须添加一个类并在已经单击的情况下将其删除。 对于这种情况，我建议编写功能来切换可以提供帮助的类。 单击li时，需要在元素上获取类。

if($(e.target).attr("class").contains("li-checked"))
{
    $(e.target).removeClass('li-checked');
    $(e.target).addClass('li-unchecked');
}
else if((e.target).attr("class").contains("li-unchecked"))
{
    $(e.target).removeClass('li-unchecked');
    $(e.target).addClass('li-checked');
}

如果该类是“ li-checked”的，则将其删除并添加“ li-unchecked” 如果该类是“ li-unchecked”，则将其删除并添加“ li-checked”

我希望这会有所帮助。