点击时“记住” div 的样式（设置 cookie） - jquery 和 jquery cookie 插件答案

【问题标题】："remember" div's style on click (set a cookie) - jquery and jquery cookie plugin点击时“记住” div 的样式（设置 cookie） - jquery 和 jquery cookie 插件
【发布时间】：2013-09-30 19:53:21
【问题描述】：

我有一组带有 mouseenter、mouseleave 和 click 事件的 div。

var originalAttributes = $('.aaa').attr('style');
$('.aaa').mouseenter(function () {
    $(this).css('background', '#aaaaaa');
    $(this).css('border', 'solid 1px red');
});
$('.aaa').mouseleave(function () {
    $(this).css('background','blue');
});
$('.aaa').click(function () {
    var $this =  $(this);
    update_x1(this);
    $this.off('mouseenter mouseleave');
});
$('#save').click(function () {
    $.cookie({ expires: 30 });
});
$('#clear').click(function () {
    $('.aaa').attr('style',originalAttributes);
});

http://jsfiddle.net/z8KuE/24/

如何在此功能中实现“保存”和“清除”功能以及使用 jquery cookie 插件？

点击“保存”应该“记住”div的当前样式，点击“清除”应该将样式重置为原始样式并清除cookie（或重写）。

编辑：由 Shimon Rachlenko 解决 - http://jsfiddle.net/z8KuE/31/

【问题讨论】：

你需要保存.aaa元素的样式吗？
是的，所有具有该类的 div。
这些 div 可能有不同的样式。
所有具有 .aaa 类的 div 的默认样式相同，但每个 div 单独与鼠标事件交互。
所以，清除按钮应该将样式重置为一些默认样式，而不是存储的样式，对吧？还有保存按钮 - 如果 div 具有不同的样式，是应该单独保存每个 div 的样式还是只保存其中一个？

标签： function cookies jquery-cookie jquery

【解决方案1】：

这里是保存和清除按钮的代码：

$('#save').click(function () {
    $('.aaa').each(function(){
        var d = $(this),
        id = d.attr('id'),
        style = d.attr('style');
        if (style != originalAttributes){   //style changed
            $.cookie('aaaStyle' + id, style, { expires: 30 });
        }
    });

});
var originalAttributes = "position: relative; left: 50px; top: 30px; width: 300px; height: 50px; background: #222222";
$('#clear').click(function () {
    // unset changes
    $('.aaa').attr('style',originalAttributes);
});

见fiddle

【讨论】：

谢谢。我在 Firefox 和 Chrome 中都试过了，还是不行。
“保存”似乎不起作用。（另外，“清除”也应该清除 cookie，或者如果更简单，只需让这些按钮记住所有 div 的状态）。
Save 为每个名为 aaaStyleb1 的 div 创建 cookie。添加删除cookies，见jsfiddle.net/z8KuE/30
这里没有结果 :( ...当我点击“保存”并重新加载时，什么也没有发生 - 只有默认样式被加载。
现在我明白了.. 您之前从未提到要重新应用保存的样式:) 您只是说要保存样式:)