jQuery cookie 切换答案

【问题标题】：jQuery cookie togglejQuery cookie 切换
【发布时间】：2012-04-10 04:09:33
【问题描述】：

我正在尝试在我的 body 标签上切换一个类，同时使用 cookie 来记住用户设置。

使用 jquery cookie 插件，这是我想出的

$("a#switchit").click(function () {
    if($.cookie('viewState')) {
        $('body').addClass('light') 
        $.cookie('viewState', 'true', { expires: 9999 });
    } else {
        $('body').removeClass('light')
        $.cookie('viewState', null); 
    };
});

我不是 jquery 方面的专家，所以语法和一切都可能是错误的，但希望你能看到我想要实现的目标并让我正确。

我的html：

<a id="switchit">Switch it</a>

【问题讨论】：

对我来说看起来很合适。发生了什么不该发生的事情？
有什么问题？什么不工作？您是否将 .cookie() 函数与其他地方的插件一起包含在内？
@idrumgood 基本上类切换“灯”在 body 标签上工作，但是当我刷新页面时，类被删除......
@Sparky672 问题是代码中是否有任何问题，如果我做对了......不，cookie插件没有在其他地方使用
我不是这个意思。我只是问您是否包含该插件。您发布的代码没有说明您正在使用启用.cookie() 的插件。很多读者可能不知道这一点。有时人们也会问一些问题，想知道为什么当他们尝试使用插件功能而没有正确包含实际插件时他们的代码不起作用。

标签： jquery cookies toggle addclass

【解决方案1】：

根据您对我对该问题的评论的回答，您的问题是您需要检查 cookie 的存在并在页面加载以及单击按钮时设置类。

对此进行扩展：cookie 将在页面刷新时保持不变（等待您将过期时间设置为合适的时间范围），而您对 DOM 进行的任何操作（即向正文添加类名）不会坚持下去。

您已经为您的用户正确设置了它以选择他们的配色方案，并且您的 cookie 设置得很好。如果他们在之前的访问中设置了它，您只是省略了您提前检查的部分。

所以，在你的 jQuery 就绪函数中，添加：

$(document).ready(function(){
    if($.cookie('viewState') == 'true'){
        $('body').addClass('light');
    }
});

【讨论】：

【解决方案2】：

我认为这会奏效。

$("a#switchit").click(function () {
    var isNotSet = $.cookie('viewState') === null;
    $('body').toggleClass( 'light', isNotSet);
    if (isNotSet) {
      $.cookie('viewState', 'true', { expires: 9999 });
    } else {
      $.cookie('viewState', null); 
    }
});

【讨论】：

【解决方案3】：

逻辑问题，看第2行：

$("a#switchit").click(function () {
    if(!$.cookie('viewState')) {
        $('body').addClass('light') 
        $.cookie('viewState', 'true', { expires: 9999 });
    } else {
        $('body').removeClass('light')
        $.cookie('viewState', null); 
    };
});

看看，当 viewState 为 TRUE 时，你是否设置 viewState=true。 viewState 为 NULL 时需要设置 viewState=true。

【讨论】：