javascript - jQuery:多个按钮使用 localStorage 切换多个类(过滤)

Question

我正在尝试创建可以显示/隐藏多个 div 的按钮，并且我还想使用 localStorage 来记住过滤操作(单击了哪些按钮，没有单击哪些按钮)。

我找到了this jsfiddle 并试图使其适应我的目的。 Here is my jsfiddle 。我非常感谢您帮助更新此 jsfiddle 以使其正常工作:

1. localStorage 不再起作用；当我刷新页面时，状态不会被记住。 (它是在原来的 jsfiddle 上做的)。我希望 localStorage 记住哪些 div 被隐藏并保留红色“危险”按钮类
2. 如果没有单击任何按钮:显示所有 div(工作正常)
3. 如果点击一项运动按钮，则仅显示该运动的 div(选中，但目前仅针对一项运动)
4. 如果点击多个运动项目按钮，则仅显示那些已切换的运动项目。隐藏其他未切换的内容。 (我的头在思考如何让它工作。不知道如何让不同的切换相互检查以查看哪些切换或未切换)
5. 按钮在未切换时为灰色，切换时为红色(我现在有toggleClass在其中一个按钮上工作)
6. 这可能是不言而喻的，但如果点击所有体育项目按钮，则会显示所有体育项目。

这是来自 my fiddle 的代码.

<button type="button" class="ncaabfilter btn btn-xs btn-default">NCAAB</button> <button type="button" class="ncaaffilter btn btn-xs btn-default">NCAAF</button> <button type="button" class="nbafilter btn btn-xs btn-default">NBA</button> <button type="button" class="nflfilter btn btn-xs btn-default">NFL</button>
<div class="ncaaf">
  NCAAF Game 1
</div>
<div class="nfl">
  NFL Game 1
</div>
<div class="nba">
  NBA Game 1
</div>
<div class="ncaab">
  NCAAB Game 1
</div>
<div class="ncaaf">
  NCAAF Game 2
</div>
<div class="nfl">
  NFL Game 2
</div>
<div class="nba">
  NBA Game 2
</div>
<div class="ncaab">
  NCAAB Game 2
</div>

$('.ncaabfilter').click(function(){
    $('.ncaaf, .nfl, .nba').toggle(800);

    var isVisible = $('.ncaaf, .nfl, .nba').is(':visible');
    localStorage.setItem('visible', isVisible);
    $('.ncaabfilter').toggleClass('btn-default btn-danger');
  });

var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$('.ncaaf, .nfl, .nba').toggle(isVisible);

非常感谢您的帮助!

更新:下面的 selami 指出 localStorage 由于 800 的原因不记得切换的 div。我想要一个动画，所以也许我让它在 localStorage 生效之前等待 800 秒？而且，如何让 localStorage 在页面刷新时保留切换按钮的 btn-danger 类？

Answer 1

toogle(800) 需要 800 毫秒，并且 :visible 属性在此时间之后设置。因此， var isVisible = $('.ncaaf, .nfl, .nba').is(':visible') 返回 true，因为它不会等待 toogle 完成。

另外 getItem('visible') === 'false' 包含 3 个相等的字符。删除其中之一。

尝试下面的JS

$('.ncaabfilter').click(function(){
    $('.ncaaf, .nfl, .nba').toggle();

    var isVisible = $('.ncaaf, .nfl, .nba').is(':visible');
    localStorage.setItem('visible', isVisible);
    $('.ncaabfilter').toggleClass('btn-default btn-danger');
  });

var isVisible = localStorage.getItem('visible') == 'false' ? false : true;
$('.ncaaf, .nfl, .nba').toggle(isVisible);

要使用 800 个参数进行切换，请使用回调参数。在toggle()方法完成后执行的回调函数。

$('.ncaabfilter').click(function(){
  $('.ncaaf, .nfl, .nba').toggle(800, function () { 
    var isVisible = $('.ncaaf, .nfl, .nba').is(':visible');
    localStorage.setItem('visible', isVisible);
  });
  $('.ncaabfilter').toggleClass('btn-default btn-danger');
});

Working JSFiddle有 800 个动画