使用 cookie 保存切换状态 + class 切换

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>

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

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

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);
}

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

Answer 2

一位 redditor 帮助了我，并建议我使用 localstorage，如果有人想要答案，请看这里

var localStorageKey = "app_state";

// to preserve state, you first need to keep track of it
  var default_state = {
  biographies: false,
  pictures: false,
  poetry: false
 }

 var saved_state = localStorage.getItem(localStorageKey);

 // ternary operator which means if `saved_state` evaluates to `true` we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;

 $(function() {
   init();

 $('.button').on('click', function() {
    var circle = $(this).attr('data-circle');
    toggleCircle(circle, !state[circle]);
    $(this).find('i').toggleClass('fa-minus fa-plus');
 });



function init() {
  for(var key in state) {
     var is_displayed = state[key];
     console.log(});is_displayed);
    toggleCircle(key, is_displayed);
  }
}

function toggleCircle(circle, is_displayed) {
if (is_displayed) {
    $('.'+circle).show()
    state[circle] = true;
} else {
    $('.'+circle).hide()
    state[circle] = false;
}

localStorage.setItem(localStorageKey, JSON.stringify(state));
}

使用 cookie 保存切换状态 + class 切换

Save toggle state + class toggle using cookies

javascript

cookies

jquery