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

请参阅fiddle

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

1 个答案: