jquery : 버그가있는 쿠키? 항상 작동하지 않는가?

Question

안녕 얘들 아, 뭔가 내 스크립트에 잘못되었습니다. div #searchbox 및 div #searchboxtrigger가 있습니다.

매우 단순함 : #searchbox가 display : none으로 숨겨져 있습니다. #searchboxtrigger가 클릭되면 나는 #searchbox를 slidingDown하고 있는데 나는 Cookie를 저장하고 있습니다. #searchbox 트리거를 다시 클릭하면 #searchbox가 다시 slidingup되고 쿠키가 null로 설정됩니다.

따라서 jquery 쿠키 플러그인을 사용하고 있습니다.

onload 쿠키가 설정되어 있는지 확인하려면 페이지가로드 될 때 #searchbox가 표시되어야합니다. #searchbox slidesUp을 다시 실행하고 쿠키가 null로 설정된 경우 쿠키가 표시되는 것을 원하지 않습니다.

온로드 :

는

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'); 
    } 
}); 

너희들은 이상한 아무것도 볼 수 있습니까? 때로는 #searchbox 트리거가 응답하지 않고 콘솔이 "내가 다시로드 할 때까지 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; 
    }); 

});