jquery - jquery cookie 设置 css 显示：无

Question

我正在使用 jquery cookie 插件，我试图让浏览器在刷新后记住 CSS 的状态，这是单击按钮时的代码：

    $('#cartHolder').attr('style','display: none !important');
    $.cookie("cartDisplay", 'none !important');

然后在我的标题中我有：

   if ($.cookie("cartDisplay")){
       $('#cartHolder').attr('style', $.cookie("cartDisplay"));
   }

问题是，每次刷新后，该display属性仍会重置为其默认属性。但是在控制台窗口中，我看到 jquery cookie 已成功存储了必要的值，只是在每次刷新后都没有写入 DOM。

有谁能帮帮我吗？

谢谢

score 3 · Accepted Answer

你从你的 cookie 中得到的字符串是这样的：

none !important

你给你的元素的东西是这样的：

 <div style="none !important"></div>

让它在你的 cookie 中完成，比如：

display:none !important

编辑
最好像这样使用它：

 $('#cartHolder').css('display', $.cookie("cartDisplay"))

并且无需更改您的 cookie 代码。（它应该可以工作）

score 3 · Accepted Answer

不应该使用attr('style')，因为它会覆盖您的所有样式。改为使用.css。也尽量避免!important。尝试

$('#cartHolder').css('display','none');
$.cookie("cartDisplay", 'none');

在你的标题中。

$(document).ready(function(){
    if ($.cookie("cartDisplay")){
           $('#cartHolder').css('display', $.cookie("cartDisplay"));
       }
});

或者你可以使用.toggle

$('#cartHolder').hide();
$.cookie("cartDisplay", 'false');

在你的标题中。

$(document).ready(function(){
    if ($.cookie("cartDisplay")){
           $('#cartHolder').toggle($.cookie("cartDisplay"));
       }
});

请记住将代码包装在里面以确保已加载$(document).ready(function(){DOM 元素

2 回答 2