使用Cookie保存切换状态+类切换

时间:2015-04-15 23:51:24

标签: javascript jquery cookies

我有大约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/

2 个答案:

答案 0 :(得分: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);
}

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

答案 1 :(得分:1)

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