关于 jQuery 切换和 cookie 的帮助答案

【问题标题】：Help with jQuery toggle & cookies关于 jQuery 切换和 cookie 的帮助
【发布时间】：2009-12-25 02:57:33
【问题描述】：

我正在编写一个切换视图脚本，它在 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");
};
});

【问题讨论】：

标签： jquery cookies

【解决方案1】：

看看toggleClass (http://docs.jquery.com/Attributes/toggleClass)

【讨论】：

太好了，我以前什至没见过toggleClass，所以这大大简化了脚本——但是我该如何添加cookie状态呢？ $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"); }); });

【解决方案2】：

要将您的 cookie 状态重新添加到您的代码中，请在 click 函数的末尾使用 .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");
 };
});

【讨论】：

太好了，谢谢！只需将其稍微更改为： $j.cookie('view_State', $j('ul.display').is('.thumb_view') ? 'list' : 'thumbs' );