时间戳

首页 > 解决方案 > 如果已单击链接，则 Jquery 从本地存储中删除项目

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

问题描述

我有一个带有一些搜索结果过滤器的页面。这些过滤器是链接，点击后，我将 id 添加到 localstorage。当页面重新加载时，如果链接的 id 存在，它会在本地存储中查找，它会修改该特定链接的 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));
  });
});

标签： javascriptjquerylocal-storage

解决方案

@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”

我希望它有所帮助。

推荐阅读