jquery cookie将css设置为display：none

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。

任何人都可以帮助我吗？

由于

Answer 1

你从cookie中取回的字符串是：

none !important

你给元素的东西是：

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

在你的coockie中完成它，例如：

display:none !important

修改
最好像这样使用它：

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

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

Answer 2

不应使用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元素