如何在单击按钮内切换类

How can I toggle a class inside a button on click?

本文关键字：按钮 单击      更新时间：2023-09-26

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

但这一次工作，但不能再回来。如何正确处理这两个方向?

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

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

jQuery的toggleClass函数

…不使用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');
});
相关文章：