Jquery - 保存类的状态多个div＃的cookie？ [英] Jquery - save class state for multiple div #'s to a cookie?

问题描述

我正在尝试复制UI效果，如 http://mcfc.co.uk I写了一个脚本，它隐藏了一个div的点击函数，并应用一个类到div，#id对应于被点击的div，反之亦然。我是新的jQuery，我如何保存这些'点击'的div的状态，以显示哪些被隐藏等。

I'm trying to replicate a UI effect as on http://mcfc.co.uk I have written a script that hides a div on click function and applies a class to a div with the #id corresponding to the div that was clicked, and the reverse. I'm new to jQuery, how would I save the state of these 'clicked' divs to a cookie to show which were hidden etc??

感谢任何帮助。

<script type="text/javascript">

$(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();
    }); 
})

</script>

HTML：

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

DIVs that are hidden/shown on click.....

<div class="column" id="col0">

<div class="portlet" id="p_0">
  <div class="portlet-header">Feeds</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
</div>
<div class="portlet" id="p_1">
  <div class="portlet-header">News</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
</div>

</div>

etc....

DIV的类适用于.. ...

DIV's that class is applied to.....

<div id="content-footer">
  <div id="p_0"></div>
  <div id="p_1"></div>
  <div id="p_2"></div>
  <div id="p_3"></div>
  <div id="p_4"></div>
</div>

推荐答案

我发布了演示我认为你想在这里。请务必添加 jQuery Cookie插件。

I posted a demo of what I think you want here. Be sure to include the jQuery cookie plugin.

这里是我使用的HTML：

Here is the HTML I used:

<div class="column" id="col0">

<div class="portlet" id="p_0">
  <div class="portlet-header">Feeds</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_1">
  <div class="portlet-header">News</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_2">
  <div class="portlet-header">Extra</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_3">
  <div class="portlet-header">Other</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_4">
  <div class="portlet-header">Last</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

</div>

<div id="content-footer">
  <div name="p_0">p0 - Feeds</div>
  <div name="p_1">p1 - News</div>
  <div name="p_2">p2 - Extra</div>
  <div name="p_3">p3 - Other</div>
  <div name="p_4">p4 - Last</div>
</div>

和脚本：

$(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错误

---

Update: Added "indexOf" prototype at the end of the script above to fix an IE bug

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

Update #2: Added cookieExpires variable, use a number to set the number of days, set it as a date() to set an end date or "null" to set it as a session cookie.

这篇关于Jquery - 保存类的状态多个div＃的cookie？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！