Создание события click с addClass/removeClass, подсчет количества и использование localStorage, чтобы пользователь не нажимал повторно позже на

Question

Привет, Я пытаюсь создать базовый виджет, который имеет как кликабельный значок, так и счетчик рядом с ним.

Значок изменится от пустого сердца к заполненному сердцу щелчком, используя addClass/removeClass, и событие click зарегистрировано и возвращает +1 для щелчка, показанного рядом с ним.

Вот что я до сих пор, но у меня возникли некоторые проблемы:

<i id="addButton" onClick="clickME()" class="likeButton fa fa-heart-o"></i> 
<p><a id="clicks">0</a></p> 

<script> 
    var clicks = 0; 
    function clickME() { 
     clicks += 1; 
     document.getElementById("clicks").innerHTML = clicks; 
} 
</script> 

JSfiddle

Счетчик работает, но по-прежнему рассчитывать после первого щелчка.

Во-вторых, изменение класса, в котором я работал, не работает.

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

<script> 
    $(document).ready(function(){ 
    $('.likeButton').click(function(){ 
     $('.likeButton').removeClass('fa-heart-o'); 
     $(this).addClass('fa-heart'); 
    }); 

}); 
</script> 

Heart class change - jsfiddle

Я попытался посмотреть на примеры все это делается отдельно и получил их близко к работе, но просто не могу показаться, что все это вместе. Помощь будет с благодарностью.

Answer 1

Попробуйте это. Вам в основном нужно переключать класс каждый раз, когда вы нажимаете на элемент.

$(document).ready(function(){ 
    $('.likeButton').click(function(){ 
     $(this).toggleClass('fa-heart-o fa-heart'); 
    });  
}); 

https://jsfiddle.net/7ku2wwu6/2/

Вот полное решение:

$(document).ready(function(){ 
    var clicks = 0; 
    $('.likeButton').click(function(){ 
     $(this).toggleClass('fa-heart-o fa-heart'); 
     $(this).hasClass("fa-heart") ? clicks++ : clicks-- ;  
     $("#clicks").text(clicks); 
    }); 
}); 

https://jsfiddle.net/ut92yujh/5/