保存cookie中多个div的类状态

时间:2011-11-16 10:58:22

标签: jquery cookies toggle toggleclass

我有这个toggleClass函数:

$(document).ready(function() {  
    $("button#playersize").click(function(){
        $("#wrapper").toggleClass("small large");
        $(".divone").toggleClass("small large");
        $(".divtwo").toggleClass("small large");
    });
});

这会在“小”和“大”onclick按钮之间更改div的类。

我想将div的类(#wrapper,.divone,.divtwo)保存到cookie中。 在重新加载时,该类应该是已保存的类。

我该如何管理?

我已经嵌入了jquery cookie插件。 我的代码可能有点多余,抱歉。

1 个答案:

答案 0 :(得分:1)

以下是您可以尝试的内容:

$(document).ready(function() {
    // replace the classes from the cookies
    // example if you want to check the cookie first
    if ($.cookie('class_wrapper').length > 0) {
        $("#wrapper").attr('class', $.cookie('class_wrapper'));
    } else {
        $("#wrapper").attr('class', 'small');
    }
    $(".divone").attr('class', $.cookie('class_divone'));
    $(".divtwo").attr('class', $.cookie('class_divtwo'));
    // bind the click event 
    $("button#playersize").click(function(){
        $("#wrapper").toggleClass("small large");
        $(".divone").toggleClass("small large");
        $(".divtwo").toggleClass("small large");
        // replace the cookie values
        $.cookie('class_wrapper', $("#wrapper").attr('class'));
        $.cookie('class_divone', $(".divone").attr('class'));
        $.cookie('class_divtwo', $(".divtwo").attr('class'));  
    });
});

警告:尚未测试