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» в этой версии. альтернативно вы можете использовать идентификатор.

Вот как бы я это пишу:

<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-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