Question

我尝试创建可以显示/隐藏多个div的按钮，我还想使用localStorage来记住过滤（点击了哪些按钮，哪些按钮没有）。< / p>

我找到了this jsfiddle，并试图让它适应我的目的。 Here is my jsfiddle。我非常感谢帮助更新这个jsfiddle以使其正常工作：

localStorage不再有效;当我刷新页面时，状态不会被记住。（它在原来的jsfiddle上做了）。我希望localStorage能够记住隐藏哪些div并保留红色＆＃34;危险＆＃34;按钮类
如果没有点击按钮：显示所有div（工作正常）
如果单击一个运动按钮，则仅显示运动的div（检查，但现在只针对一项运动）
如果单击多个运动按钮，则仅显示切换的运动项目。隐藏未切换的其他人。（我的头脑正在旋转如何使这个工作。不知道如何让不同的切换相互检查，看看哪些是切换的）
切换时按钮为灰色，切换时为红色（我现在有一个按钮上的toggleClass）
这可能不言而喻，但如果点击所有运动按钮，则显示所有运动。

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

Answer 1

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

也是getItem（＆＃39;可见＆＃39;） === ＆＃39; false＆＃39;包含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');
});

带有800动画的

Working JSFiddle

Answer 2

我认为你不需要localStorage就像修改js代码一样，

$('#songpicker').on('change', function() {
    change( $(this).val()  );
})

这是Working FIddle

我希望它能按照您的预期运作，如果不让我知道，您不必删除动画。不需要为$('.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'); });添加课程data。另外我认为默认情况下保留按钮类divs会更好，因为它会显示所有选项都可见。

更新为记住按钮状态

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

Updated fiddle 3

jQuery：多个按钮使用localStorage

2 个答案: