fontawesome + jQuery的：它不“拇指向下”图标更改为“竖起大拇指”

问题描述：

的问题是，jQuery的不改变的“拇指向下”图标“竖起大拇指”fontawesome + 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

得到任何帮助，

感谢

答

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

答

你拨动类 “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"); 
});

它的工作原理，但一次。如果它每次都应该工作，当按钮“竖起大拇指！”时被按下。有这种情况下的解决方案吗？ – skparallax 2014-11-01 13:54:20

答

使用回调函数：

$("#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>

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

Demo

fontawesome + jQuery的：它不“拇指向下”图标更改为“竖起大拇指”

相关推荐