“记住”div的点击风格（设置一个cookie） – jquery和jquery cookie插件

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

如何在此function和jquery cookie插件的使用中实现“保存”和“清除”function？

点击“保存”应“记住”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); }); 

看小提琴