Question

我想采用一个简单的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

使用event delegation，因为当您在页面上添加点击事件时，没有包含类.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;
    }
});

根据当前班级更改班次

2 个答案: