클릭시 버튼 내에서 클래스를 전환하는 방법은 무엇입니까?

Question

jQuery에서 클릭 할 때 몇 개의 클래스를 토글하는 적절한 방법은 무엇입니까?

1) HTML을 클릭하기 전에 :

<button class="btn btn-success"><i class="icon-check"></i> Clicked!</button> 

3) HTML 다른 클릭 후 : 클릭 후

<button class="btn"><i class="icon-sign-blank"></i> Click me!</button> 

2) HTML (시작과 동일)

<button class="btn"><i class="icon-sign-blank"></i> Click me!</button> 

현재 jQuery :

$('btn').on('click',function(e) { 
    $('btn > i').removeClass('icon-sign-blank').addClass('icon-check'); 
    $('btn').addClass('btn-success'); 
}); 

하지만 한 번 작동하지만 다시는 작동하지 않습니다. 양방향을 처리하는 적절한 방법은 무엇입니까?

Answer 1

(당신이 jQuery를 사용하지 않으려면,이뿐만 아니라 jQuery를하지 않고 수행 할 수 있습니다)!

$('btn').on('click',function(e) { 
    $('btn > i').toggleClass('icon-sign-blank icon-check'); 
    $(this).toggleClass('btn-success'); 
}); 

Answer 2

jQuery의 toggleClass 기능. 그것을 관리 할 수 ​​toggleClass를 사용 -해야 -

Answer 3

... 그리고 toggleClass를 사용하지 않고 당신이 할 수있는

var btnEl = $('btn'); 
btnEl.on('click', function() { 
    if (btnEl.hasClass('icon-sign-blank')) btnEl.removeClass('icon-sign-blank'); 
    else btnEl.addClass('icon-sign-blank'); 
});