javascript - 使用 cookie 保存切换状态 + 类切换

Question

我有大约 4 个按钮，它们在单击时显示内容

$(function() {
  $(".hidden").hide();

  $('.button').on('click', function() {
       var circle = $(this).attr('data-circle');
       $('.'+circle).toggle();
       $(this).find('i').toggleClass('fa-minus fa-plus');
    });
});

我的html

<button class="button" data-circle="biographies">
    <i class="fa fa-plus"></i> biographies
</button>

<button class="button" data-circle="pictures">
    <i class="fa fa-plus"></i> pictures
</button>

<button class="button" data-circle="poetry">
    <i class="fa fa-plus"></i> poetry
</button>

<div class="biographies hidden">content</div>
<div class="pictures hidden">content</div>
<div class="poetry hidden">content</div>

内容是隐藏的，因为我想在每次点击它时显示它，我还使用了很棒的字体，如您所见，当内容可见时，它会给我一个加号，一旦内容被隐藏，它就会给我一个减号.

如何保存内容和图标类的切换状态？

http://jsfiddle.net/hv4aywa4/

Answer 1

这里有一个简单的 cookie 教程: http://www.w3schools.com/js/js_cookies.asp

将以下函数添加到您的 JS(当然要稍微修改它们以删除警报语句等): setCookie() 和 getCookie()

然后，在页面加载时，您使用“getCookie('toggleStatus')”检查 cookie 是否已经存在(我假设您将 cookie 命名为“toggleStatus”)。如果它们不存在，请使用以下命令创建尽可能多的它们:

setCookie('toggleStatus','hidden', 30);
setCookie('toggleStatus2','hidden', 30); 

等....

如果它们已经存在，则相应地更新按钮的状态。

然后点击每个按钮，检查 cookies 当前值，并相应地更新它们:

if(getCookie('toggleStatus') === 'hidden') {    
    setCookie('toggleStatus', 'show', 30);
} else {
    setCookie('toggleStatus', 'hidden', 30);
}

这是一个未经测试的答案，可能有也可能没有拼写错误:)