jsFiddle Example

Question

我有这个改变网站风格的javascript代码。但是此代码仅在您单击时才更改样式。刷新页面后，它返回默认值。我希望它保存用户首选项。我非常喜欢这些代码，我不想用另一个代码来改变它。你能帮忙吗？我希望你在添加cookies代码后给我代码！

$(document).ready(function() {
    $("#fullswitch").click(function() {
        $("#chpheader").removeClass("compact");
           $("#imgg").removeClass("compact");
           $("#chpheader").removeClass("original");
        $("#imgg").removeClass("original");
                        $("#chpheader").addClass("normal");
        $("#imgg").addClass("normal");

    });
    $("#compactswitch").click(function() {
        $("#chpheader").addClass("compact");
        $("#imgg").addClass("compact");
        $("#chpheader").removeClass("original");
        $("#imgg").removeClass("original");
        $("#chpheader").removeClass("normal");
        $("#imgg").removeClass("normal");

    });
      $("#originalswitch").click(function() {
        $("#chpheader").addClass("original");
        $("#imgg").addClass("original");
        $("#chpheader").removeClass("compact");
           $("#imgg").removeClass("compact");
                        $("#chpheader").removeClass("normal");
        $("#imgg").removeClass("normal");

    });

});

Answer 1

你做错了。您应该将类添加到顶级元素（例如根（<html>））并根据该样式设置文档的其余部分。

.style1-p {
    background: blue;
}

.style1-div {
    background: red;
}

应该成为

.style1 p {
    background-blue;
}

.style1 div {
    background-red;
}

这样，你只需要改变一个类，整个文档就会改变。这也意味着你只需要保存一个cookie（描述那个类），并只加载一次。

jsFiddle Example

编辑：更新了jsFiddle示例以包含Cookie。

EDIT2：更新了jsFiddle示例以包含多种样式！

Answer 2

Cookie只是一个键值对，因此您可以为每个元素设置一个Cookie，其中键是id，值是类名。在jQuery中你可以这样设置它们：

$("#chpheader").removeClass("compact");
$.cookie("chpheader", $("#chpheader").attr('class'));

然后在您准备好的文档的顶部，您将拥有：

$(document).ready(function() {
    if($.cookie("#chpheader")) {
         $("#chpheader").set("className", $.cookie("#chpheader"));
    }
         ....

但警告，你的代码已经有点乱了，如果你进去并开始设置和取消整个地方的cookie，事情会变得非常草率。我建议尝试提取一些函数，并设置观察者模式。另外，你真的需要一个普通的课吗？如果你这样做，你真的需要在添加紧凑类时摆脱它吗？

javascript cookies保存并加载

2 个答案:

jsFiddle Example