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（）

然后，在页面加载时，检查cookie是否已经存在（我假设您将cookie命名为＃34; toggleStatus＆＃34;）使用＆＃34; getCookie（＆＃39; toggleStatus＆＃39; ）＆＃34 ;.如果它们不存在，请使用以下方法创建所需数量：

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

等...

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

然后在每个按钮上单击，检查cookie当前值，并相应地更新它们：

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

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

Answer 2

一位redditor帮助了这个，并建议我使用本地存储，如果有人想要答案，这就是

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保存切换状态+类切换

2 个答案: