Question

我正在尝试使用jquery用cookie保存状态，但没有运气。有人可以检查我的代码有什么问题吗？

$('.slide1').click(function() {
    $('.target1').slideToggle('slow', function() {
        $(this).toggleClass('.target1');
    });
    $.cookie('form_visible', $('.target1').css('display','block').toString());
    return false;
});         
$(function() {
    if($.cookie('form_visible') == 'true') {
        $('.target1').css('display','block');
    } else {
        $('.target1').css('display','none');
    }
});

http://jsfiddle.net/J9zQm/

Answer 1

一些问题：

您需要一个插件

要使用$.cookie，您需要plugin。你似乎不知道。

您正试图存储"[object Object]"

$('.target1').css('display','block')

返回一个对象（即$('.target1')）

然后，

$('.target1').css('display','block').toString()

返回

"[object Object]"

$('.target1')为空

您使用
```
$('.target1').slideToggle('slow', function() {
    $(this).toggleClass('.target1');
});
```
那是：
- 如果$('.target1')为空，则不执行任何操作
- 如果$('.target1')不为空，则删除其类'.target1'，以便$('.target1')后面的内容为空。

这里有一个你想要的工作示例，但使用sessionStorage代替$.cookie，因为我不知道它是如何工作的。

JS：

var $target1 = $('.target1');
$target1.toggleClass('hidden', sessionStorage.getItem('form_visible') != 'true');
$('.slide1').click(function() {
    $target1.slideToggle('slow', function() {
        $(this).toggleClass('hidden');
    });
    sessionStorage.setItem('form_visible', $target1.hasClass('hidden'));
});

CSS：

.target1.hidden{
    display:none;
}

Demo

刷新页面后DIV显示块状态

1 个答案: