撥動類不更換類

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

所以我寫了這個peice的代碼：

$('.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"); 
}); 

如果你想互換tw o不同類別，您的代碼將需要更多的邏輯：

$('.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角度來看。