javascript - 使用 addClass/removeClass 创建点击事件、点击计数，并使用 localStorage 防止用户稍后再次点击

Question

嘿，我正在尝试创建一个基本的类似小部件，它有一个可点击的图标和旁边的计数器。

使用 addClass/removeClass 单击时，图标将从空心变为填充心，并且单击事件已注册，并为单击旁边显示为数字的单击返回 +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

计数器可以工作，但在第一次点击后继续计数。

其次，我在这里工作的类(class)变更不起作用。

<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/