如果链接已被单击，则 Jquery 从本地存储中删除项目

Question

我有一个页面，其中包含一些搜索结果过滤器。 这些过滤器是链接，点击后，我将 id 添加到 localstorage。 当页面重新加载时，如果链接的 id 存在，它会在 localstorage 中查找，它会修改该特定链接的 css。 我能够做到这一点。 现在，当再次单击同一个链接时，我需要能够从 localstoarage 中删除链接的 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”

我希望它有帮助。