gpt4 book ai didi

具有多个分类的 div 框的 jQuery Cookie

转载 作者:太空宇宙 更新时间:2023-11-03 19:00:54 28 4
gpt4 key购买 nike

我现在有一个成就网站,用户可以在其中查看成就(存储在所有样式为 .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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com