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

Question

我有一组带有 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/

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

见小提琴