如何使用jquery cookie插件保存toggleClass方法的状态

How to save state of toggleClass method using jquery cookie plugin

本文关键字：toggleClass 方法 状态 保存 插件 何使用 jquery cookie      更新时间：2023-09-26

我知道我看过类似的问题，但答案对我来说还不起作用。

因此，我试图保存JavaScripttoggleClass方法的状态，以便在用户刷新页面时加载保存的状态。此时，它只是恢复到正常状态。我正在尝试使用jquery cookie插件来实现这一点https://github.com/carhartl/jquery-cookie

我的代码如下

 $(document).ready(function(){
   $(".steps").click(function(){
   $(this).toggleClass("selected");
   $.cookie("selected", $(this).hasClass("selected"));
  });
});

控制台上并没有出现任何问题，所以我很难找到答案。

确保布尔值已设置。您存储了一个字符串，但需要一个布尔

JSFIDDLE

$(document).ready(function(){
   var sel = $.cookie("selected"); // get the cookie
   sel = sel=="true"; // convert to boolean - null is false, "false" is false
   $(".steps").toggleClass("selected",sel); // initial
   $(".steps").on("click",function() {
     var $this = $(this);
     sel = !sel; // toggle
     $this.toggleClass("selected",sel); // toggles
     $.cookie("selected", sel,{ expires: 7, path: '/' });
  });
});   

$(document).ready(function(){
if($.cookie("selected")){
    $(".steps").addClass("selected");
} 
   $(".steps").click(function(){
   $(this).toggleClass("selected");
   $.cookie("selected", $(this).hasClass("selected"));
  });
});
相关文章：