jquery：バグのクッキースクリプト？必ずしも働くとは限りません

Question

ねえ、 私のスクリプトで何かが間違っています。私はdiv #searchboxとdiv #searchboxtriggerを持っています。

かなり類似しています：#searchboxはdisplay：noneで非表示になっています。 #searchboxtriggerがクリックされた場合、私は#searchboxをslideDownしています。私はCookieを保存しています。 #searchboxtriggerを再度クリックすると、#searchboxが再びslidingUpされ、Cookieがnullに設定されます。

私はjquery cookieプラグインを使用しています。

onload Cookieが設定されているかどうかを確認するには、ページが読み込まれたときに#searchboxが表示されている必要があります。 #searchbox slidesUpをもう一度実行し、Cookieがnullに設定されている場合、私はそれを表示したくありません。

のonload：onclickの

if($.cookie('search_visible') == 'true'){ 
     $('#searchbox').show(); 
     console.debug('is visible'); 
    }else{ 
     $('#searchbox').hide(); 
     console.debug('is hidden'); 
    } 

：

$('#searchboxtrigger').click(function() { 
    if($.cookie('search_visible') == 'true') { 
     $('#searchbox').slideUp('fast'); 
     $.cookie('search_visible', null); 
     console.debug('is hidden'); 
    } else { 
     $('#searchbox').slideDown('fast'); 
     $.cookie('search_visible', 'true'); 
     console.debug('is visible'); 
    } 
}); 

あなたたちは奇妙なものを見ることができますか？時々#searchboxtriggerが反応せず、リロードするまでコンソールが12回何度も隠されてしまいます。 私は考えるのを忘れていますか？

Answer 1

初期状態を取得するためにクッキーを読み、状態が変化したときにそれを書き込むだけです。内部状態では使用しないでください。JavaScript varをそのまま使用します。

<div>の代わりにsearchboxtriggerを<a>に設定し、再利用しているjQuery DOM要素をあらかじめ計算しておくことをおすすめします。

このような何か：

$(document).ready(function() { 

    var searchVisible = $.cookie('search_visible') == 'true'; 
    var searchBox = $('#searchbox'); 

    if (searchVisible) { 
     searchBox.show(); 
    } else { 
     searchBox.hide(); 
    } 

    searchBox.click(function() { 
     if (searchVisible) { 
      searchBox.slideUp('fast'); 
      $.cookie('search_visible', null); 
      searchVisible = false; 
     } else { 
      searchBox.slideDown('fast'); 
      $.cookie('search_visible', 'true'); 
      searchVisible = true; 
     } 
     return false; 
    }); 

});