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 不记得切换的 div 因为 800 秒。我想要一个动画，所以也许我让它在 localStorage 生效之前等待 800 秒？但是，当页面刷新时，如何让 localStorage 保留切换按钮的 btn-danger 类？

Answer 1

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

还有 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 动画

Answer 2

我认为你不需要localStorage，只需修改js代码，

$('.btn').click(function(){
    var button = $(this);
    var contents = button.text().trim().toLowerCase();
    if (button.hasClass('btn-danger')) {
        $('.' + contents).hide(800);
    } else {
        $('.' + contents).show(800);
    }
    $('.'+ contents +'filter').toggleClass('btn-default btn-danger');
});

这里是Working FIddle

我希望它可以按您的预期工作，这样您就不必删除动画，如果不告诉我。不需要为divs 添加类data。此外，我认为如果您默认保留按钮类 btn-danger 会更好，因为它表明所有选项都是可见的。

更新到记住按钮状态

如果您想记住 localStorage 中选定按钮的状态，请检查此Example to remember state。为此，您必须为用作 localStorage 中每个按钮的键的按钮添加 id 属性。按钮选择状态将作为这些键的值保留。

Updated fiddle 3