jQuery的類變化懸停效果

Question

有沒有更好的辦法做到以下？：

$('.favorite').mouseenter(function(){ 
    var el = $(this); 
    if(el.hasClass('fa-star-o')) { 
     el.removeClass('fa-star-o'); 
     el.addClass('fa-star'); 

     el.mouseleave(function(){ 
      el.removeClass('fa-star'); 
      el.addClass('fa-star-o').unbind('mouseleave'); 
     }) 
    } 
}) 

這是一個簡單的懸停在使用字體真棒類作用。

Answer 1

我認爲最乾淨的方法是使用jQuery的功能hover()和toggleClass()：

$('.favorite').hover(function(){ 
    $(this).toggleClass("fa-star fa-star-o"); 
});