fontawesome + jQuery的：它不「拇指向下」圖標更改爲「豎起大拇指」

Question

的問題是，jQuery的不改變的「拇指向下」圖標「豎起大拇指」

我曾試圖改變其他屬性，如顏色，甚至試圖改變「拇指向下」圖標「Github的」圖標 - 所有這些工作得很好，但不是「豎起大拇指」

HTML

<button id="change_color">Change color</button> 

<button id="change_to_github">Change to Github</button> 

<button id="thumbs_up">Thumbs Up!</button><br><br> 


<i class="fa fa-thumbs-o-down fa-5x"></i><br><br><br><br> 


<!-- Here it works well --> 
<i class="fa fa-thumbs-o-up"></i> 

jQuery

$("#change_color").click(function(){ 
    $(".fa-thumbs-o-down").toggleClass("red"); 
}); 

$("#change_to_github").click(function(){ 
    $(".fa-thumbs-o-down").toggleClass("fa-github"); 
}); 

$("#thumbs_up").click(function(){ 
    $(".fa-thumbs-o-down").toggleClass("fa-thumbs-o-up"); 
}); 

CSS

.red { 
    color: red; 
} 

here is my code on jsfiddle

得到任何幫助，

感謝

Answer 1

原因Doodlebunche的答案只能在第一時間爲您在選擇使用原來的字體真棒圖標類的名稱。一旦你改變了這個類，選擇器就會失敗。

在這種情況下，我傾向於使用js特定的類來處理js活動。所以我在這個版本中加入了'js-result'類。或者你可以使用一個ID。

這是我怎麼會這樣寫：

<button id="change_color">Change color</button> 
<button id="change_to_github">Change to Github</button> 
<button id="thumbs_up">Thumbs Up!</button><br><br> 
<i class="js-result fa fa-thumbs-o-down fa-5x"></i><br><br><br><br> 
<!-- Here it works well --> 
<i class="fa fa-thumbs-o-up"></i> 

<script> 
$(document).ready(function() { 
    $("#change_color").click(function(e) { 
     e.preventDefault(); 
     $(".js-result").toggleClass("red"); 
    }); 

    $("#change_to_github").click(function(e) { 
     e.preventDefault(); 
     $(".js-result").toggleClass("fa-github"); 
    }); 

    $("#thumbs_up").click(functione() { 
     e.preventDefault(); 
     $(".js-result").toggleClass("fa-thumbs-o-up").toggleClass("fa-thumbs-o-down"); 
    }); 
}); 
</script> 

Answer 2

你撥動類 「FA-拇指-O-UP」 這增加了它，但不會刪除「fa-thumbs-o-down」類。如果您首先刪除課堂上的大拇指，它會起作用。

DEMO：http://jsfiddle.net/n7wj2ggy/3/

$("#thumbs_up").click(function(){ 
    $(".fa-thumbs-o-down").removeClass("fa-thumbs-o-down").addClass("fa-thumbs-o-up"); 
}); 

Answer 3

使用回調函數：

$("#thumbs_up").click(function(e){ 
    $(".fa-thumbs-o-down").toggleClass(function(){ 
     $(this).removeClass('fa-thumbs-o-down'); 
     return 'fa-thumbs-o-up'; 
    }); 
}); 

---

小的改進

HTML

<button id="change_color" data-class="red">Change color</button> 

<button id="change_to_github" data-class="fa-github">Change to Github</button> 

<button id="thumbs_up" data-class="fa-thumbs-o-up">Thumbs Up!</button><br><br> 


<i class="fa fa-thumbs-o-down fa-5x"></i><br><br><br><br> 

JS

$('button').on('click', function(e){ 
    var btn = $(this); 
    $('.fa').toggleClass(function(){ 
     $(this).removeClass(); 
     return 'fa ' + btn.data('class') + ' fa-5x'; 
    }); 
}); 

Demo