1

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

我现在要做的是通过 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

谢谢！

4

1 回答 1

0

为了简化，使用jquery cookie 插件，其余的应该很容易。

这是一个演示
，您必须为每个 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
于 2012-08-20T19:54:00.310 回答