幫助jQuery切換和Cookie

Question

我正在研究切換視圖腳本，它在2個視圖（網格&列表）之間翻轉。 到目前爲止，我已經可以正常工作了，但我試圖使用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"); 
}; 
}); 

Answer 1

要添加您的Cookie中國返回到你的代碼，使用​​或.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"); 
}; 
}); 

Answer 2

看toggleClass（http://docs.jquery.com/Attributes/toggleClass）