“记住” div的样式点击（设置一个cookie） - jquery和jquery cookie插件 [英] "remember" div's style on click (set a cookie) - jquery and jquery cookie plugin

问题描述

我有一组使用mouseenter，mouseleave和点击事件的div。

I have a group of divs with mouseenter, mouseleave and click events.

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插件？

How "save" and "clear" functionality can be achieved in this function and with the usage of jquery cookie plugin?

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

Click on "save" should "remember" the div's current style, and click on "clear" should reset the style to original and clear the cookie (or re-write).

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

edit: solved by Shimon Rachlenko - http://jsfiddle.net/z8KuE/31/

推荐答案

以下是保存和清除按钮的代码：

Here is the code for save and clear buttons:

$('#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);
});

请参阅小提琴

这篇关于“记住” div的样式点击（设置一个cookie） - jquery和jquery cookie插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！