Jquery 使用cookies永久更改CSS

我正在制作一个带有jQuery实验的小网站（有点“游戏化”）。在每个游戏中都有一个目标，当找到目标并单击时，我想对页脚中的心脏符号进行永久性更改。我正在尝试使用cookie插件来实现这一点

指向其中一个子页面的链接：

以下是页脚CSS：

footer{
position: fixed;
bottom: 0px;
padding: 10px; 
width: 100%;
height: 100px;
background: /*url(../images/bgFooter.png)*/ #dddddd;
z-index: 2000;
}

.heartCollection{
width: 940px;
margin: 0 auto;
text-align: justify;
}

.heartCollection p{
font-size: 13px;
float: none;
width: 100%;
padding: 0;
margin: 0 0 -20px 0;
text-align: center;
position: relative;
}

.heartCollection ul li{
width: auto;
display: inline;
list-style: none;
float: left;
margin: 10px 0 -10px 0;
padding: 0 0 0 98px;
font-size: 70px;
}

.heartCollection ul li a{
font-family: menlo;
color: #cccccc;
}

.found{
color: #ff63ff;
}

.credits{
width: 100%;
height: auto;
margin: 80px auto;
bottom: 0px;
left: -40px;
position: relative;
text-align: right;
}

下面是Javascript：

$(document).ready(function() {
    //help
    $('#helpInfo').hide();
    $('#help h2').click(function(){
        $('#helpInfo').show(300);
    });
    $('#helpInfo').click(function() {
        $(this).hide(300);
    });
    //reward  
    $('#reward').hide();
    $('#goal a').click(function(){
        $('#reward').fadeIn(1000);
    });
    //Collection
    $.cookie('class','found',{
    });
    var foundHeart = $.cookie('found');
    $('.exit').click(function(){
        $('#collection1').addClass(foundHeart);
    });

});

什么都没发生，那我做错了什么？ 编辑：更重要的是，我应该做些什么来修复它

 var foundHeart = $.cookie('class'); 

---

您应该按名称而不是值获取cookie:）

有两件事不对：

首先,

var foundHeart = $.cookie('found');

您正在尝试使用上述函数按名称检索cookie。而是传递值

cookie参数设置如下：

$.cookie('name', 'value', { options });

因此，cookie的名称为“class”，值为“found”

换句话说

var foundHeart = $.cookie('found');

应该是

var foundHeart = $.cookie('class');

第二，即使您纠正了代码不能按预期运行的错误。为什么？因为您正在设置加载的cookie

此行设置cookie：

$.cookie('name', 'value');

但是您正在DocumentReady函数中运行它

您应该将该行移动到此函数中：

$('#goal a').click(function(){
    $('#reward').fadeIn(1000);
    // moved set cookie function here
    $.cookie('class', 'found');
});

这样，它只在你达到目标时设置。

试试这个插件：

创建心脏默认cookie（如果不存在）：

//name of the cookie: hearts
//name of the hearts: h1,h2,h3,h4,h5,h6
//values: 1 if active, 0 if inactive
if ( !$.super_cookie().check("hearts") ) {
   $.super_cookie().create("hearts",{h1:"0",h2:"0",h3:"0",h4:"0",h5:"0",h6:"0"});
};

找到目标时（目标1示例）

在“重新加载”页面上，记住是否选择了心脏

if ( $.super_cookie().read_value("hearts","h1") == "1" ) {
   $("#collection1").addClass('foundHeart');
};

---

您刚刚创建了另一个游戏：找到bug！RomanTheGreat是对的，您正在尝试获取一个名为

found

的cookie，而实际上名称是

class

。不管怎样，我喜欢这个主意！书签；）很酷，我还没有让它工作，但如果它是整洁的：）你的意思是像上面的‘var=foundHeart’？编辑：所以我真的应该剪掉var上面的那行，然后粘贴到=？后面，我已经添加了额外的解释。修复cookie调用后，您的主要问题是您正在将其设置为加载状态。很酷，我一定会尝试以下方法：）

if ( $.super_cookie().read_value("hearts","h1") == "1" ) {
   $("#collection1").addClass('foundHeart');
};