Jquery – 将多个div＃的类状态保存到cookie中？

我试图在http://mcfc.co.uk上复制一个UI效果我已经编写了一个脚本，它隐藏了点击function上的div并将一个类应用于一个div，其中#id对应于被点击的div ，反过来。 我是jQuery的新手，我如何将这些’clicked’div的状态保存到cookie中以显示隐藏的等等？

谢谢你的帮助。

 $(document).ready(function(){ $('.portlet').click( function(){ var idtext = this.id; $(this).hide(); $("[id*=" + idtext + "]").not(this).addClass('add'); }); $("#content-footer div").click( function(){ var idtext = this.id; $(this).removeClass('add'); $("[id*=" + idtext + "]").not(this).show(); }); })  

HTML：

点击隐藏/显示的DIV …..

 
 
 
Feeds
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit 
 
 
 
News
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit 
 
 
 etc.... 

DIV的那个类适用于……

Answer 1

我在这里发布了一个我认为你想要的演示 。 一定要包含jQuery cookie插件 。

这是我使用的HTML：

 
 
 
Feeds
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
 
 
 
News
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
 
 
 
Extra
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
 
 
 
Other
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
 
 
 
Last
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
 
 
 
 
p0 - Feeds
 
p1 - News
 
p2 - Extra
 
p3 - Other
 
p4 - Last
  

和剧本：

 $(document).ready(function(){ var cookie = $.cookie("hidden"); var hidden = cookie ? cookie.split("|").getUnique() : []; var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date // Remember content that was hidden $.each( hidden, function(){ var pid = this; //parseInt(this,10); $('#' + pid).hide(); $("#content-footer div[name='" + pid + "']").addClass('add'); }) // Add Click functionality $('.portlet').click(function(){ $(this).hide(); $("#content-footer div[name=" + this.id + "]").addClass('add'); updateCookie( $(this) ); }); $("#content-footer div").click(function(){ $(this).toggleClass('add'); var el = $("div#" + $(this).attr('name')); el.toggle(); updateCookie( el ); }); // Update the Cookie function updateCookie(el){ var indx = el.attr('id'); var tmp = hidden.getUnique(); if (el.is(':hidden')) { // add index of widget to hidden list tmp.push(indx); } else { // remove element id from the list tmp.splice( tmp.indexOf(indx) , 1); } hidden = tmp.getUnique(); $.cookie("hidden", hidden.join('|'), { expires: cookieExpires } ); } }) // Return a unique array. Array.prototype.getUnique = function() { var o = new Object(); var i, e; for (i = 0; e = this[i]; i++) {o[e] = 1}; var a = new Array(); for (e in o) {a.push (e)}; return a; } // Fix indexOf in IE if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] == obj) { return i; } } return -1; } } 

---

更新：在上面脚本的末尾添加了“indexOf”原型来修复IE错误

更新＃2：添加了cookieExpires变量，使用数字设置天数，将其设置为日期（）以设置结束日期，或将“null”设置为会话cookie。

Answer 2

由于你已经在使用jQuery，你可以利用它并使用非常简单易用的插件， Cookie ：

你可以在这里看到一些演示 。

或者在这里：

 $.cookie("myCookie", true); alert($.cookie("myCookie")); // alerts true. but remember, it's always returned as a string. 

使用示例更新：

 $(document).ready(function(){ $('.portlet').click(function(){ var idtext = this.id; $(this).hide(); $("[id*="+ idtext +"]").not(this).addClass('add'); $.cookie(idtext, false); }); $("#content-footer div").click(function(){ var idtext = this.id; $(this).removeClass('add'); $("[id*="+ idtext +"]").not(this).show(); $.cookie(idtext, true); }); }) 

如您所见，我们在cookie中设置当前id（idtext）的可见状态，其值为true或false。 加载这些portlet时，您可以检查cookie（服务器端或客户端，您的选择）并根据需要提供前端服务。 如果你需要帮助，请告诉我:-)