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');
});

Answer 2

jQuery的toggleClass功能。

Answer 3

...而且没有使用toggleClass（如果你不想使用jQuery，这也可以在没有jQuery的情况下完成）

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

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

3 个答案: