jQuery - Changer de classe sur clic et se souvenir par cookie

Question

Hey les gens. J'essaie de mettre en place une page où si vous cliquez sur un lien, la classe va changer. Un pas de plus, cela devrait être stocké dans un cookie. Chaque tag A a un identifiant unique.

Par exemple, voici mon lien exemple:

<a href="#" id="unique1" class="up">Link text</a> 

Lorsqu'un utilisateur clique sur le lien, puis la classe devrait être changé pour « bas » et un cookie devrait être stocké pendant une remémoration de la semaine ce clic. Toute visite ultérieure à cette page devra alors se référer au cookie et définir la classe en conséquence si le lien a déjà été cliqué.

Mes connaissances sur javascript et jQuery sont minimes .. c'est juste au dessus de ma tête. Toute suggestion sur la façon de faire ce travail?

Answer 1

Bien sûr, vous pouvez changer la classe en un clic.

$(".up").click(function(evt){ $(event.target).removeClass("up").addClass("down"); }); 

Gestion des cookies dans JS? Read up a bit sur ce point. Vous voudrez essentiellement définir l'ID unique comme un tableau/une liste d'entre eux à l'intérieur du cookie. Ensuite, au chargement de la page, faites ceci.

// list = ['#unique1', '#unique2' ... '#unique-n']; 
for(var id in list) 
{ 
    $(id).removeClass("up").addClass("down"); 
} 

Answer 2

J'utiliser ce plugin pour effet ceci:

http://code.google.com/p/cookies/

Le code pourrait être quelque chose comme:

// set default options 
    // expires date 
    var $todayDate = new Date(); 
    var $expireDate = ($todayDate.getDate() + 7) + '/' + $todayDate.getMonth() + '/' + $todayDate.getFullYear(); 

     $.cookies.setOptions({ 
      expiresAt: $expireDate; 
      }); 


    // click functionality 
     $('#unique1').click(function(){ 

      var $this = $(this); 

      $this.removeClass('up').addClass('down'); 

      var $thisClass = $this.attr("class"); 

      $.cookies.set('ckClass', $thisClass); 

      return false; 

     }); 

Pour vérifier la valeur du cookie et assurez-vous que la classe est utiliser quelque chose comme:

var $ckVal = $.cookies.get('ckClass'); 
    if ($ckVal) { 
     if ($ckVal == 'up') { 
      $('#unique1').attr('class', '').addClass('up'); 
     } else { 
      $('#unique1').attr('class', '').addClass('down');} 
    }