javascript - jQuery:加1后只减1

Question

我如何在 jQuery 中执行此操作。我已经有一个脚本可以在点击一个按钮后加 1。但我还想要一些东西，如果我再次单击该按钮，它应该减去 1，并将按钮返回到其原始状态。

这是我当前的 jquery 代码

$(document).ready(function() {
    $("#addMe").one('click',function(){
        var counter = parseInt($("#hiddenVal").val());

        counter++;

        $("#hiddenVal").val(counter);
        $("#theCount").text(counter);
        $("#addMe").toggleClass('active');
    });
});

这是我的实时 js fiddle :http://jsfiddle.net/jehzlau/7hv2eyv0/

现在，我点击它后它会加 1。该按钮只能单击一次以添加 + 1。按钮的颜色会发生变化。这是我想要实现的第一个目标，而且它已经在发挥作用。

我现在唯一的问题是再次单击后还原更改。

比如你点击按钮，现在是蓝色，心形是黑色，数字是2。我想要的是，如果你再次点击，按钮会默认再次变成绿色，心形到白色，数字 2 比 1。我只想反转第二次单击时发生的情况。然后如果我再次点击它(第 3 次点击)，它会回到 2，然后按钮会变成蓝色，心形会再次变成黑色。如果我再次点击它(第 4 次点击)，它会再次恢复。等等……等等……

这就是我想做的，但我做不到。我希望这里有人能指出我正确的方向。 :(

Answer 1

我会这样做。查看事件类是否存在，然后根据它递增/递减计数器:

       $("#addMe").on('click',function(){
            var counter = parseInt($("#hiddenVal").val());
            if($(this).hasClass('active'))
                counter--;
            else
                counter++;
            $("#hiddenVal").val(counter);
            $("#theCount").text(counter);
            $("#addMe").toggleClass('active');
        });

Working Demo