如何在点击按钮内切换类？

Question

在jQuery中点击几个类的正确方法是什么？

1)点击之前的HTML:

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

2)点击后的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>

当前的jQuery:

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

但这有效,但不会再回来了.处理这两个方向的正确方法是什么？

Answer 1

您可以 - 应该 - 使用toggleClass来管理它!

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