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

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

帮助jQuery切换＆amp;饼干

2 个答案: