jQuery cookie切换

Question

我在使用Cookie记住用户设置时尝试在我的body标签上切换一个类。

使用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>

Answer 1

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

要扩展这一点：一个cookie将在页面刷新时持续存在（等待你设置一个合适的时间范围的到期），而你对DOM所做的任何操作（即向一个类添加一个类名）都不会持续。

您已正确设置，供您的用户选择其配色方案，并且您正在设置您的Cookie。如果他们在之前的访问中设置了它，您只是提前检查了部分。

因此，在你的jQuery ready函数中，添加：

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

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

Answer 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。