Как изменить класс тега <i> на клик? JQuery?

Question

Это мой < я > класс:

<i class="button fa fa-heart-o"></i> 

Обратите внимание, что я использую Font Awesome

Как сделать так, чтобы, когда пользователь нажимает на нее, класс «фа-сердце-о " заменяется на " fa-heart ".

Я знаю функции toggleClass в JQuery, наряду с функцией addClass, но проблема в том, что класс «фа-сердце-о» не удаляются, когда пользователь нажимает на элемент.

Это то, что я хочу код для вывода как:

<i class="button fa fa-heart-o"></i> 

Когда пользователь нажимает на нее, она становится:

<i class="button fa fa-heart"></i> 

Когда пользователь нажимает на него снова, становится:

<i class="button fa fa-heart-o"></i> 

И так далее,

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'); 
});