Question

根据当前类别点击更改类别

2015-03-05

121

jquery click font-awesome addclass removeclass

我想要一个简单的 FontAwesome 图标：

<div class="emotion">
    <i class="fa fa-smile-o"></i>
</div>

并根据当前类交换类：

$(".emotion .fa-smile-o").click(function (){
    $(this).removeClass('fa-smile-o').addClass("fa-meh-o");
});
$(".emotion .fa-meh-o").click(function (){
    $(this).removeClass('fa-meh-o').addClass("fa-frown-o");
});
$(".emotion .fa-frown-o").click(function (){
    $(this).removeClass('fa-frown-o').addClass("fa-smile-o");
});

但目前这仅适用于第一个类更改。我做错了什么？

Answer 1

使用事件委托，因为当您添加点击事件时，在页面上，没有带有类 .fa-frown-o 和 .fa-meh-o 的元素>

$(".emotion").on('click', '.fa-smile-o', function (){
    $(this).removeClass('fa-smile-o').addClass("fa-frown-o");
});
$(".emotion").on('click', '.fa-meh-o', function (){
    $(this).removeClass('fa-meh-o').addClass("fa-frown-o");
});
$(".emotion").on('click', '.fa-frown-o', function (){
    $(this).removeClass('fa-frown-o').addClass("fa-smile-o");
});

Answer 2

问题是，当这些绑定器运行时，那些类不在您要求的元素上。因此，只有第一个可以工作，因为当这些代码运行时它已经是那个类了。

因此，为了解决这个问题，您应该这样做：

$(".emotion .fa").click(function (){
    if($(this).hasClass('fa-smile-o')) {
       $(this).removeClass('fa-smile-o').addClass("fa-frown-o");
       return;
    }
    if($(this).hasClass('fa-meh-o')) {
       $(this).removeClass('fa-meh-o').addClass("fa-frown-o");
       return;
    }
    if($(this).hasClass('fa-frown-o')) {
       $(this).removeClass('fa-frown-o').addClass("fa-smile-o");
       return;
    }
});