jquery - jquery cookie set css to 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 に書き込まれていません。

誰でも私を助けることができますか？

ありがとう

score 3 · Accepted Answer

Cookie から返される文字列は次のとおりです。

none !important

要素に与えるものは次のとおりです。

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

次のように、あなたのクッキーでそれを完成させてください：

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