我现在有一个成就网站，用户可以在其中查看成就(存储在所有样式为 .unselect 的 div 框中)，然后更改为样式 .select 当点击使用 jQuery 时。这还会在页面右上角添加一个计数，以便用户可以看到他们选择了多少。
我现在想做的是通过 cookie 记住那些选中的框，这样当用户重新加载或返回页面时，他们之前选择的框以及数量仍然保留在那里。
我日以继夜地试图让它工作，在这里环顾四周所有修复它的答案都是为了隐藏 div 类，而不是简单地改变样式，我尝试修改它们几乎失败了。
这是我目前编写的 HTML 部分的简化版本:
<body>
<div id="header">
<h1>Header Title here</h1>
<p class="navigation">Some navigation links</p>
</div>
<div id="counter">
<h1>Counted:</h1>
<p class="numCount">0</p>
</div>
<div id="container">
<h2>Plus Achievements</h2>
<div class="unselect">
<table width="100%" border="0" cellpadding="6">
<tr>
<td width="64" valign="middle">
<img src="http://dl.dropbox.com/u/1733724/tf2icons/tf_complete_training.png"/>
</td>
<td valign="top" align="left">
<h3>Title Here</h3>
<p>Description Here</p>
</td>
</tr>
</table>
</div>
<div class="unselect">
<table width="100%" border="0" cellpadding="6">
<tr>
<td width="64" valign="middle">
<img src="http://dl.dropbox.com/u/1733724/tf2icons/tf_complete_training.png"/>
</td>
<td valign="top" align="left">
<h3>Title Here</h3>
<p>Description Here</p>
</td>
</tr>
</table>
</div>
<script>
$(".unselect").click(function() {
$(this).toggleClass("select");
var numSelect = $('.select').length
$('#counter').html('<h1>Counted:</h1><p class="numCount">' + numSelect + '</p>');
});
</script>
</body>
</html>
您可以在此处访问我用来设置页面样式的文档: http://dl.dropbox.com/u/1733724/cgl-pascal.css
谢谢!
最佳答案
为了简化，使用jquery cookie plugin剩下的应该很容易。
这是一个 Demo
您必须为每个 div 添加特定的 ID
<div class="unselect" id="div1"></div>
<div class="unselect" id="div2"></div>
...
var selectedDivs = $.cookie("selected");//get the cookie
if(selectedDivs){
var IDs = selectedDivs.split(' '); //split by space and get array of IDs
for(i=0;i<IDs.length;i++){
var ID = IDs[i];
if(ID) $('.unselect'+ID).toggleClass("select"); //select only the specific ID
}
$('#counter').html('<h1>Counted:</h1><p class="numCount">' + $('.select').length + '</p>');
}
然后你应该添加到处理程序
var selectedDivs = "";
$('div.select').each(function(){
selectedDivs += " #" + $(this).attr('id');//add the ID with a space
});
$.cookie("selected",selectedDivs, { expires: 30 }); //store all selected IDs
关于具有多个分类的 div 框的 jQuery Cookie，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12043886/