根据当前 class 单击更改 class

Question

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

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

并根据当前 class 交换 class：

$(".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");
});

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

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

问题是，当这些活页夹运行那些 class 不在您要求的元素上时。所以只有第一个有效，因为当这些代码执行运行.

时，它已经是 class

所以要处理它，您应该这样做：

$(".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;
    }
});

根据当前 class 单击更改 class

Change class on click based on current class

jquery

click

font-awesome

addclass

removeclass