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小提琴:http://jsfiddle.net/jehzlau/7hv2eyv0/

现在,我点击后加1.该按钮只能点击一次才能添加+ 1.按钮的颜色会发生变化.这是我想要实现的第一个,它已经在工作了.

我现在唯一的问题是再次点击它后还原更改.

例如,如果你点击按钮,它现在是蓝色的,心脏是黑色的,数字是2.我想要的是如果你再次点击它,按钮将默认再次变为绿色,心脏变为白色,并且数字2到1.我只想反转第二次点击发生的事情.然后,如果我再次点击它(第三次点击),它将返回到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');
        });

工作演示