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

fontawesome + jQuery：它不会将“拇指向下”图标更改为“拇指向上”

3 个答案: