Aide avec jQuery toggle & cookies

Question

Je travaille sur un script de vue à bascule, qui bascule entre 2 vues (grille & liste). Je l'ai tout fonctionne bien jusqu'à présent, mais j'essaie d'utiliser un cookie pour se souvenir de la sélection des utilisateurs lors des actualisations de la page (en utilisant un plugin cookie jQuery). Cependant, si la vue est à l'état modifié, il faut 2 clics pour l'obtenir pour changer la prochaine fois.

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

$j("span.switch_thumb").toggle(function(){ 
    $j("span.switch_thumb").addClass("swap"); 
    $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").addClass("thumb_view"); 
      $j.cookie('viewState', 'thumbs'); 
    }); 
    }, function() { 
    $j("span.switch_thumb").removeClass("swap"); 
    $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").removeClass("thumb_view"); 
      $j.cookie('viewState', 'list'); 
    }); 
}); 

// COOKIES 
// view state 
var viewState = $j.cookie('viewState'); 
// Set the user's selection for the viewState 
if (viewState == 'thumbs') { 
    $j("ul.display").addClass("thumb_view"); 
    $j("span.switch_thumb").addClass("swap"); 
}; 
}); 

Je sais pourquoi c'est, car le script ne fonctionne que d'une seule manière, en ajoutant une classe pour changer la vue. Mais comment puis-je réécrire le script afin qu'il fonctionne dans les deux sens, comme dans, si la classe est déjà ajoutée lorsque la page est chargée (à cause du cookie) cela fonctionnera dans le sens inverse et supprimera la classe?

• • • EDIT * * *

Ok, merci à zincorp, je suis maintenant très simplifié le script - mais le problème est maintenant, comment est-ce que j'ajoute mes états de cookie, comme dans mon script précédent?

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

    $j("span.switch_thumb").click(function() { 
     $j("span.switch_thumb").toggleClass("swap"); 
     $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").toggleClass("thumb_view"); 
     }); 
    }); 

// COOKIES 
// view state 
var viewState = $j.cookie('viewState'); 
// Set the user's selection for the viewState 
if (viewState == 'thumbs') { 
    $j("ul.display").addClass("thumb_view"); 
    $j("span.switch_thumb").addClass("swap"); 
}; 
}); 

Answer 1

Pour ajouter vos états de cookie dans votre code, utilisez .is('.class') ou .hasClass('class') à la fin de la fonction de clic.

Voici le code complet:

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

$j("span.switch_thumb").click(function() { 
    $j("span.switch_thumb").toggleClass("swap"); 
    $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").toggleClass("thumb_view"); 
    }); 
    $j.cookie('viewState', $('ul.display').is('.thumb_view') ? 'thumbs' : 'list'); 
}); 

// COOKIES 
// view state 
var viewState = $j.cookie('viewState'); 
// Set the user's selection for the viewState 
if (viewState == 'thumbs') { 
    $j("ul.display").addClass("thumb_view"); 
    $j("span.switch_thumb").addClass("swap"); 
}; 
}); 

Answer 2

Regardez toggleClass (http://docs.jquery.com/Attributes/toggleClass)