在 jQuery 中切换加法/减法答案

【问题标题】：Toggle addition/subtraction in jQuery在 jQuery 中切换加法/减法
【发布时间】：2014-05-05 05:17:26
【问题描述】：

我正在寻找一个 div 的当前值，并在另一个 div 的切换上添加或减去该当前值。

流程看起来像这样：

获取当前值
点击后添加“10”
第二次点击时减去“10”
返回新值

到目前为止，我已经想出了这个。问题是它通过前两次单击从加法到减法，但在第三次单击时它停留在减法。

$("#clickThis").click(function(e){
    e.stopPropagation();
    var costVal = parseInt($("#cost").text(),10);
    var costNewVal = costVal + 22;
    var costOldVal = costNewVal - 22;
    $("#cost").toggle(
        function(){
            $(this).text(costNewVal);
            console.log("Addition");
        },
        function(){
            $(this).text(costOldVal);
            console.log("Subtraction");
        }
    );
});

A JsFiddle can be found here.

【问题讨论】：

标签： jquery html math user-interface

【解决方案1】：

你可以有一个数据属性，它的值是要加或减的，每次 * -1 以得到倒数

  $("#clickThis").click(function(e){
    var addThis = parseInt( $(this).data('plusminus') );
    var newVal = parseInt( $("#cost").text() ) + addThis;
    $('#cost').text(newVal);
    $(this).data('plusminus', addThis * -1);
  });

fiddle link

如果您需要进行任何更改，这使得它可用于具有不同值的许多字段。

编辑：忘记添加带有数据属性的html：

  <div data-plusminus="25" id="clickThis">Click This</div>
  <div id="cost">25.00</div>

【讨论】：

【解决方案2】：

.toggle(function,function) 在 1.8 版已弃用，并在 1.9 版从 JQuery 中删除。

如果您需要该功能并且像 JSFiddle 显示的那样在 2.1 版上，您可以使用下面链接的问题的答案来实现类似于已移除切换的功能。

What to use instead of toggle(…) in jQuery > 1.8?

【讨论】：

【解决方案3】：

试试这个

     var flag=false;
$("#clickThis").click(function(e){
    e.stopPropagation();
    var costVal = parseInt($("#cost").text(),10);
        if(flag)
    {
         $("#cost").text(costVal-22);
    }
    else
    {
        $("#cost").text(costVal+22);
    }
       flag=!flag;
});

Demo

【讨论】：

这几乎奏效了。它正在更改“#clickThis”而不是“#cost”的值。我需要点击“#clickThis”并让它更改“#cost”的值
这就是你想要的吗？
不抱歉，这不起作用。单击它只保留当前值，然后在每次后续单击时添加 22。我需要它在第一次单击时将 22 添加到“#cost”（jsfiddle 中的 25）的当前值，然后在第二次单击时减去 22单击，在第三个上加 22，在第四个上减去，等等（每隔一个）。我用你的代码更新了小提琴。 jsfiddle.net/w8gX8/4