Jquery - speichern-Klasse Zustand für mehrere div #'s ein cookie?

Ich versuche zu replizieren, ein UI-Effekt als auf http://mcfc.co.uk ich habe ein Skript geschrieben, verbirgt sich ein div auf Klick-Funktion und es gilt eine Klasse zu einem div mit der #id des entsprechenden div-Element, auf das geklickt wurde, und auf der Rückseite. Ich bin neu in jQuery, wie würde ich das speichern der Status dieser 'geklickt' divs, um ein cookie zu zeigen, die versteckt wurden, etc??

Vielen Dank für jede Hilfe.

<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:

DIVs, die versteckt/angezeigt, klicken Sie auf.....

<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 ' s, die Klasse angewendet wird.....

<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>

bitte Bearbeiten Sie die Formatierung, wählen Sie den code in deiner Frage zuerst und klicken Sie dann auf die Schaltfläche code ..
Sie haben keine eindeutigen IDs in den HTML-Code, gewährt mit $("[id*="+ idtext +"]") funktionieren würde, aber ich glaube nicht, es ist eine gute Praxis.

InformationsquelleAutor RobW | 2010-01-20

Ich habe eine demo von dem, was ich denke, Sie wollen hier. Werden Sie sicher, dass die jQuery cookie plugin.

Hier ist die HTML die ich verwendet habe:

<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>

Und das Skript:

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

Update: Hinzugefügt "indexOf" Prototyp am Ende des script oben fix ein IE-bug

Update #2: Hinzugefügt cookieExpires variable, verwenden Sie eine Zahl, um die Anzahl der Tage, als Datum (), um ein end-Datum oder "null", um es als ein session-cookie.

Fudgey - dieses Skript erreicht genau das, was ich versuche zu tun. Sehr geschätzt wird - die einzigartige # Selektoren übernommen-board. Danke. stackoverflow = ein großartiger Ort
Im habend ärger mit diesem im IE ist, wird es nicht zeigen, werden die portlets auf das laden der Seite, Mozilla ist in Ordnung??
ugh, #&$^% IE nicht mitspielt. Ich glaube, ich brauche etwas Hilfe herauszufinden, warum es funktioniert für alle Browser, sondern der IE.
Ok, ich habe es... anscheinend IE indexOf javascript-Funktion ist foobared. Ich fügte hinzu, ein Update an das Ende des Codes, Dank diesem Beitrag (stackoverflow.com/questions/1744310/...). Der code und die demo wurde aktualisiert!
Noch einmal vielen Dank Fudgey, ich war gar nicht bewusst ist, perfekt!
Eine Letzte Sache ist ich habe Probleme bei der Einstellung der Ablaufzeit des cookie zu sagen, 7 Tage in der Zukunft - nicht nur session-basiert. Wie kann ich dies tun??
Eine weitere variable zum festlegen der cookie-Ablauf für 7 Tage. Obwohl es ist nicht gut dokumentiert, es gibt eine Beispiel Seite für das cookie-plugin hier (stilbuero.de/jquery/cookie)

InformationsquelleAutor Mottie

2

Da bist du schon mit jQuery, konnte Sie nutzen und verwenden Sie die sehr einfach und leicht zu bedienende plugin, Cookie:

Sehen Sie einige demos hier.

Oder hier:
```
$.cookie("myCookie", true);

alert($.cookie("myCookie")); //alerts true. but remember, it's always returned as a string.
```
Update mit Beispiel zum Gebrauch:
```
$(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);
    }); 
})
```
Wie Sie sehen können, sind wir festlegen der visible-Status der aktuellen id (idtext) in einem cookie mit dem Wert, der entweder true oder false.
Beim laden dieser portlets können Sie die Cookies (entweder serverseitige oder clientseitige, Ihr choise) und dienen der front-end-wie gewünscht. Sagen Sie mir, wenn Sie mehr Hilfe brauchen 🙂
- vielen Dank für Ihre Beratung kordonme. Mit der Suche über das plugin, ich bin nicht sicher, wie man über die Umsetzung zu sichern, die der Staat für die einzelnen div - # - und den entsprechenden div #'s-Klasse auf 'jeder' klicken ?
- danke für die zB - wie würde ich mich über die Manipulation, der gespeicherte Wert in "idtext" und aktualisieren Sie das 'portlet' und Verwandte div # clientseitiger, kein backend ?
- Eigentlich fudgey geschrieben, eine perfekte demo. Das sieht aus wie exactually, was Sie wollen 🙂
- Danke für den Hinweis mich in die richtige Richtung - eine große Hilfe gewesen
- No problemo 😉
InformationsquelleAutor Kordonme

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.