切换类不替换类

Question

我有一些像这样的字体很棒的图标：

<a class="allarme" id="allarme1" href="#">
    <i class="fa fa-toggle-off"></i> <!--<span>Avvia</span>-->
</a>

我想替换单击时的图标，因此我需要更改 i 类。例如从fa-toggle-off 到fa-toggle-on

所以我写了这段代码：

$('.allarme').click(function(e){
    e.preventDefault();
    console.log("clicked");
    $(this).find("i").toggleClass(".fa-toggle-off .fa-toggle-on");
});

控制台告诉我事件被正确触发但类没有被切换。我试图检查SO previous questions，我发现与另一个问题的正确解决方案相同的代码。我错过了什么？

Answer 1

jQuery.toggleClass() 最多需要 2 个参数：

1. 类名
2. 状态

如果你想删除一个类，每次点击某个东西时重新添加它，你只需要提供类名

$('.allarme').click(function(e){
    e.preventDefault();
    $(this).find("i").toggleClass("fa-toggle");
});

如果您希望交换两个不同的类，您的代码将需要更多逻辑：

$('.allarme').click(function(e){
    e.preventDefault();

    var $i = $( this ).find( 'i' )

    if ( $i.hasClass( 'fa-toggle-off' ) ) {
        $i.removeClass( 'fa-toggle-off' ).addClass( 'fa-toggle-on' )
    } else {
        $i.removeClass( 'fa-toggle-on' ).addClass( 'fa-toggle-off' )
    }
});

我建议您使用第一种方法。无论是从 JavaScript 的角度来看，还是从函数式 CSS 的角度来看，它都更加简洁。