jquery切换和cookies帮助

我正在编写一个切换视图脚本,它在两个视图(网格和列表)之间切换。 到目前为止,一切都很好,但我正在尝试使用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),那么它将以相反的方式工作并移除类?

• • • 编辑***

好吧,多亏了Zincorp,我现在已经大大简化了脚本——但问题是现在,我该如何添加我的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");
};
});