Question

我目前拥有的一个成就网站，用户可以在其中查看成就（存储在所有使用 .unselect 设置的div框中），然后更改为 .select 使用jQuery点击时。这也会在页面的右上角添加一个计数，以便用户可以看到他们选择了多少。

我现在要做的是通过cookie记住这些选定的框，以便当用户重新加载或返回页面时，他们之前选择的框仍然保留在那里，以及数字计数。 / p>
我一直在努力尝试让这个工作，并在这里四处寻找解决它的所有答案是隐藏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

谢谢！

Answer 1

简化，使用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 div框的jQuery Cookies

1 个答案: