帮助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）