Помощь с переключателем jQuery и файлами cookie

Question

Я работаю над сценарием переключения, который переключается между двумя видами (сетка и список). Пока у меня все работает нормально, но я пытаюсь использовать cookie, чтобы запомнить выбор пользователей при обновлении страницы (используя плагин jQuery cookie). Однако, если представление находится в измененном состоянии, потребуется 2 щелчка, чтобы изменить его в следующий раз.

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");
};
});

Я знаю, почему это так, поскольку скрипт выполняется только в одном направлении, добавляя класс для изменения представления. Но как я могу переписать сценарий так, чтобы он выполнялся в обоих направлениях, например, если класс уже добавлен при загрузке страницы (из-за файла cookie), он будет работать противоположным образом и удалять класс?

• • • РЕДАКТИРОВАТЬ * * *

Хорошо, благодаря цинкорпу, я теперь значительно упростил скрипт - но проблема в том, как мне добавить мои состояния файлов cookie, как в моем предыдущем скрипте?

    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

Посмотрите на toggleClass (http://docs.jquery.com/Attributes/toggleClass)

Answer 2

Чтобы добавить свои cookie-файлы обратно в ваш код, используйте .is('.class') или .hasClass('class') в конце функции щелчка.

Вот полный код:

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");
 };
});