리팩토링 후 JQuery 함수가 제대로 작동하지 않습니다.

Question

저는 JQuery (C#)를 처음 사용하며 여기에서 잘못된 것을 볼 수 없습니다.

다음과 같은 JQuery를 사용하여 햄버거 메뉴를 토글하고 디머 효과를 넣고 Body로 스크롤하는 것을 방지합니다. 햄버거는 또한 3 개의 가로선에서 X까지 움직입니다. 첫 번째 JQuery (아래)에서는 잘 작동합니다. 그러나 나는 이걸 정제하고 두 번째 JQuery에 대한 코드를 정리하려고 노력 해왔다.이 코드는 내게 훨씬 깨끗해 보인다. (미래 함수를 염두에 둔다.) 그러나 내가 이것을 할 때 햄버거가 X에서 더 이상 애니메이트되지 않는 것을 제외하고는 모든 것이 여전히 작동합니다. 어쨌든 뉴비 JQuery의 눈에는 왜 눈에 띄는 차이가 없으므로 실제로 볼 수 없습니다.

또한 나는 또한 다음 코드 2 줄이도이 같은 함수에 필요한 있는지 알고 싶어요 초보자로서 :

e.preventDefault(); 

event.stopPropagation(); 

JQuery와 (작품) :

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function (e) { 
      event.stopPropagation(); 
      jQuery(this).toggleClass('active'); 
      jQuery('.menu ul').toggleClass('active'); 
      jQuery('.hamburger ul').toggleClass('active'); 
      jQuery('.dimmer').toggleClass('active'); 
      jQuery('body').toggleClass('no-scrolling'); 

      e.preventDefault();    
    }); 
}); 

JQuery와 (작동하지 않습니다) :

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function(e) { 
    toggleNav(); 

    function toggleNav() { 
     event.stopPropagation(); 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 
     jQuery('.hamburger ul').toggleClass('active'); 
     jQuery('.dimmer').toggleClass('active'); 
     jQuery('body').toggleClass('no-scrolling'); 

     e.preventDefault(); 
    } 
    }); 
}); 

Answer 1

몇 가지 문제가 있습니다. click 이벤트 내부에서 함수를 정의하고 직접 호출했습니다. 이 때문에 귀하의 this 변수에 필요한 범위가 잘못 지정됩니다. 즉, #toggle-nav을 누를 때마다 함수가 작성, 호출 및 파기됩니다. 클릭 이벤트 외부에 선언하면 한 번만 생성되므로 클릭당 다시 사용됩니다. 사용중인 인수 이름이 e 인 동안 event.stopPropagation()도 사용하고있었습니다. 마지막으로 익명 함수를 .click 함수에 전달할 필요가 없습니다. 명명 된 함수를 이름으로 전달하면 직접 호출됩니다.

다음은 이러한 문제를 해결하기 위해 정리 된 코드입니다.

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(toggleNav); 

    function toggleNav(e) { 
     e.stopPropagation(); 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 
     jQuery('.hamburger ul').toggleClass('active'); 
     jQuery('.dimmer').toggleClass('active'); 
     jQuery('body').toggleClass('no-scrolling'); 

     e.preventDefault(); 
    } 
}); 

또는 익명 기능을 사용할 수도 있습니다.

jQuery(document).ready(function() { 
    jQuery('#toggle-nav').click(function (e) { 
     jQuery(this).toggleClass('active'); 
     jQuery('.menu ul').toggleClass('active'); 
     jQuery('.hamburger ul').toggleClass('active'); 
     jQuery('.dimmer').toggleClass('active'); 
     jQuery('body').toggleClass('no-scrolling'); //Alternatively : jQuery(document.body) 

     return false; 
    }); 
}); 

event AND e의 사용에 대해서는, this link 참조. 기본적으로 event 속성은 일부 브라우저의 전역 컨텍스트에 있습니다. 즉, 귀하의 코드가 해당 브라우저에서 작동하지만 다른 브라우저에서는 작동하지 않을 수 있습니다. Click 이벤트는 제공된 함수에 대한 첫 번째 인수로 이벤트를 자동 전달하므로 브라우저에 브라우저 간 직접 액세스 할 수 있습니다.

마지막주의 사항으로, jQuery 이벤트 return false;을 사용하면 e.stopPropagation();과 e.preventDefault();이 모두 발생하므로 false를 반환하면 직접 호출하지 않아도됩니다.

jQuery source for reference

Answer 2

를 원래의 코드에서 this의 값을 말한다 #toggle-nav 요소. 수정 된 버전에서 this은 해당 상위 함수를 참조합니다.

Answer 3

당신은 이벤트 리스너에서 함수를 이동해야합니다.

또한 this이 변경되기 때문에 함수에 올바른 선택기가 추가되었습니다. 원하는 경우 이벤트 대상을 전달할 수 있습니다 (e.target, 아마도 내 머리 위로 떠 올릴 수 없습니다). 마지막 질문에 답하기 위해 질문의 두 줄을 쓰지 않을 것이라고 생각합니다. 그러나 모든 코드를 보지 않아도 확실히 말할 수는 없습니다.