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

<强> Working Demo

Answer 2

尝试使用on()而不是one()，

$(document).ready(function () {
    $("#addMe").on('click', function () { // use on instead of one
        var counter = parseInt($("#hiddenVal").val());
        $(this).hasClass('active') ? 1 : 2;// toggle text 1,2
        $("#hiddenVal").val(counter);
        $("#theCount").text(counter);
        $("#addMe").toggleClass('active');
    });
});

Live Demo

如果您想从任何hiddenVal add 1和subtract 1，那么您可以更改它，

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

        // change the line where counter initialization takes place like
        $(this).hasClass('active') ? counter-- : counter++ ;

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

Answer 3

如果您真的不想计算但只是切换，请使用全局变量并切换：

var counter = false;
$(document).ready(function() {
        $("#addMe").click(function(){
            counter = !counter;
            $("#hiddenVal").val(counter);
            $("#theCount").text(counter);
            $("#addMe").toggleClass('active');
        });
    });

您也可以删除表单中的隐藏元素。

jQuery：加1后只减去1

3 个答案: