on()을 사용하여 요소를 전환하는 방법은 무엇입니까?

Question

I 모바일 터치 이벤트와 jQuery를 함께 사용하기위한 자신의 예에서 Hammer.js 라이브러리를 사용하고, 그들은 다음과 같은 한 :

$('#test_el').hammer().on("tap", ".nested_el", function(event) { 
    console.log(this, event); 
}); 

이 간단합니다; 그러나 토글 동작을 #test_el에 통합하려고합니다. 즉 위의 예가 다음과 같이 바뀐 경우 :

$('button').hammer().on("tap", function() { 
    $('div').addClass('open'); 
}, function { 
    $('div').addClass('close'); 
}); 

이 "토글"동작은 어떻게 작동합니까?

Answer 1

처음에는 모든 버튼에 시작 클래스를 추가 할 수 있습니다. 그런 다음 이벤트에서 클래스가 있는지 확인할 수 있습니다. 이렇게하면 도청했을 때 요소의 상태를 알 수 있습니다.

$('button').addClass('close'); 

$('button').hammer().on('tap', function() { 
    if ($(this).hasClass('close')) { 
    $(this).removeClass('close').addClass('open'); 
    // Event code 
    } 
    else { 
    $(this).removeClass('open').addClass('close'); 
    // Event code 
    } 
}); 

Answer 2

jQuery도 toggleClass 메소드를 제공합니다.

Answer 3

이미 JQuery에서 사용할 수있는 toggleClass 함수가 있습니다. 원하는대로 처리하는 것 같습니다.

Answer 4

시도 : classnamehere 당신의 클래스 이름을 것

$('#test_el').hammer().on("tap", ".nested_el", function(event) { 
    $(this).toggleClass("classnamehere"); 
}); 

.