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个参数：

班级名称
国家

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

$('.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角度来看也是如此。

切换类不替换类

1 个答案: