Question

我正在尝试使用jqueryCookie制作一个带日/夜模式的按钮。我不确定这段代码有什么问题。第一个“if”语句将起作用并添加cookie，但是一旦我刷新页面，body将在cookie保留时再删除graybg类。

$(document).ready(function() {
    var btn = $('#modeSwitch'),
    body = $('body'),
    cookieVal = $.cookie("switchLight");

    btn.click(function(e) {
        if (cookieVal != "2") {
            $.cookie("switchLight", "2", { path: '/' });
            body.addClass('graybg');
            btn.text('Day');
        }else if (cookieVal == "2") {
            btn.text('Day');
            body.addClass('graybg');
            $.removeCookie("switchLight", { path: '/' });
            $(this).text('Night');
        };
    });
});

Answer 1

你可以使用这样的东西：

$(function(){
var btn = $('#modeSwitch');
var body = $('body');
var cookieVal = $.cookie("switchLight");
    if (cookieVal == "1") {
        body.addClass('graybg');
        btn.val('Night');
    }else{
        body.removeClass('graybg');
        btn.val('Day');
    }
    btn.on('click',function() {
        var cookieVal = $.cookie("switchLight");
        if (cookieVal == "1") {
            $.cookie("switchLight", "0", { path: '/' });
            body.removeClass('graybg');
            $(this).val('Day');
        }else{
            $.cookie("switchLight", "1", { path: '/' });
            $(this).val('Night');
            body.addClass('graybg');
        }
    });
});

Answer 2

您应该只有一个单击处理程序附加到此按钮，而不是两个单击处理程序。现在看来，两个点击处理程序都会被调用。

btn.click(function(e) {
    if (cookieVal != "2") {
        $.cookie("switchLight", "2", { path: '/' });
        body.addClass('graybg');
        $(this).text('Day');
    } else if (cookieVal == "2") {
        body.addClass('graybg')
        $.removeCookie("switchLight", { path: '/' });
        $(this).text('Night');
    }; 
});

要解决您在页面刷新时没有应用graybg类的问题，那是因为除了响应按钮点击事件之外你没有分配该类，所以你可能需要这样的东西来应用页面加载时的样式。

cookieVal = $.cookie("switchLight");
if(cookieVal === '2') {
    btn.addClass('graybg');
}

为什么$ .removeCookie（）不工作？

2 个答案: