Jquery 토글 쿠키가 작동하지 않습니다.

Question

jquery 토글 쿠키 스크립트를 만들었지 만 작동하지 않습니다. 트리거를 클릭하면 아무 것도 나타나지 않습니다.

기본적으로이 코드의 내용은 숨겨져있는 콘텐츠의 경우 쿠키를 추가하여 숨겨진 상태를 기억합니다. 사용자가 다시 토글하면 쿠키가 삭제됩니다. 또한 셰브론의 상태를 쿠키를 통해 어떻게 유지할 수 있습니까?

jQuery(document).ready(function ($) { 
if ($.cookie('t4hidden')) { 
    $('#top4hide').hide(); 
} 
$("#top4trigger").click(function() { 
    $("i",this).toggleClass("fa fa-chevron-up fa fa-chevron-down") 
    $("#top4hide").toggle("blind"); 
}); 
$("#top4trigger").click(function() { 
    if ($("#top4hide").is(":hidden")) { 
    $.cookie("t4hidden", "foo"); 
} else { 
    $.removeCookie("t4hidden"); 
} 
}); 

jsfiddle : http://jsfiddle.net/P2dy8/

Answer 1

여기 근본적인 문제는 타이밍이다. 코드에서 두 번의 클릭 콜백이 있습니다. 하나는 요소의 표시를 전환하고 다른 하나는 쿠키를 설정하는 것입니다. 어느 것이 먼저 실행되는지는 제어 할 수 없지만 그렇게해도 도움이되지는 않을지라도 제어 할 수는 없습니다. 첫 번째 콜백은 애니메이션으로 요소를 숨기므로 두 번째 콜백이 실행되면 요소가 계속 표시됩니다. $('#top4hide").is(":hidden")에 대한 검사는 항상 false를 반환합니다. 왜냐하면 실행 시점과 관계없이 - 처음 또는 두 번째 - 여전히 그 시간에 표시됩니다.

다행히도 you can pass a second parameter to jQuery's toggle() - 애니메이션이 완료되면 실행되는 함수입니다. 애니메이션 후 요소의 가시성을 확인하여 쿠키 값을 올바르게 설정할 수 있습니다. 일부 working code over on JSFiddle을 게시했습니다. 쿠키가 설정된 경우 pageload에서 div를 숨길 때 갈매기 모양을 전환합니다. (당신은 jQuery cookie plugin가 $.cookie() 및 $.removeCookie()를 얻기 위해로드해야합니다.)

$(function() { // $() is an alternative syntax for $(document).ready() 
    if ($.cookie('t4hidden')) { // Update page if cookie is set 
     $('#top4hide').hide(); 
     $('#top4trigger i').toggleClass('fa-chevron-up fa-chevron-down'); 
    } 

    $("#top4trigger").click(function() { // Click handler for link 
     $("i", this).toggleClass("fa-chevron-up fa-chevron-down") 
     $("#top4hide").toggle("blind", function() { // Set/delete cookie after animation complete 
      if ($("#top4hide").is(":hidden")) { 
       $.cookie("t4hidden", "foo"); 
      } else { 
       $.removeCookie("t4hidden"); 
      } 
     }); 
    }); 
});