如何在点击时更改 标签的 class？ jQuery？

Question

这是我的class:



注意我用的是Font Awesome

如何做到当用户点击它时，class "fa-heart-o" 被替换为 "fa-heart".

我知道 jQuery 中的 toggleClass 函数以及 addClass 函数，但问题是 class "fa-heart-o"当用户点击项目时不会被删除。

这就是我希望代码输出的内容：



当用户点击后变成：



当用户再次点击时，变成：



以此类推，

Answer 1

$('i.button').click(function(){

    var $this = $(this);
    if ($this.hasClass('fa-heart-o')) {
        $this.removeClass('fa-heart-o');
        $this.addClass('fa-heart');
    } else {
        $this.removeClass('fa-heart');
        $this.addClass('fa-heart-o');
    }
});

UPD 这是更简单的解决方案

$('i.button').click(function(){
    $(this).toggleClass('fa-heart fa-heart-o');
});

如何在点击时更改 <i> 标签的 class？ jQuery？

How to change the class of an <i> tag on click? jQuery?

jquery

font-awesome