Fatal编程技术网
  • jquery/
  • 具有多个分类div框的jQuery cookie

具有多个分类div框的jQuery cookie

jquery css class html cookies

具有多个分类div框的jQuery cookie,jquery,css,class,html,cookies,Jquery,Css,Class,Html,Cookies,我目前拥有的是一个成就网站，用户可以在其中查看成就（存储在所有样式为的div框中。取消选择），然后更改为样式。单击使用jQuery时选择。这还会在页面的右上角添加一个计数，以便用户可以看到他们选择了多少 我现在要做的是通过cookies来记住那些选中的框，这样当用户重新加载或返回页面时，他们先前选择的框仍然保留在那里，并且还有数字计数 我日以继夜地试图让它正常工作，在这里，所有解决方法都是为了隐藏div类，而不是简单地更改样式，而我修改它们的尝试几乎失败了 以下是我到目前为止所编写的HTML部分

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

我现在要做的是通过cookies来记住那些选中的框，这样当用户重新加载或返回页面时，他们先前选择的框仍然保留在那里，并且还有数字计数

我日以继夜地试图让它正常工作，在这里，所有解决方法都是为了隐藏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>


标题在这里

一些导航链接

计数：

0

加上成就
标题在这里
描述在这里

标题在这里
描述在这里

$（“.unselect”）。单击（函数（）{
$（this.toggleClass（“选择”）；
var numSelect=$（'.select'）.length
$（'#counter'）.html（'计数：
'+numSelect+'
'）；
});
您可以在此处访问我用于设置页面样式的文档：

谢谢

为了简化，使用和其他都应该很简单

这里有一个
您必须向每个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