Question

我希望获取div的当前值，并在另一个div的切换上添加或减去当前值。

流程看起来像这样：

获取当前值
点击一次即可添加＆＃39; 10＆＃39;
第二次点击减去＆＃39; 10＆＃39;
返回新值

到目前为止，我已经对此表示赞同。问题是它通过前两次点击从加法到减法，但在第三次点击时它会保持减法。

$("#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.

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

Answer 2

试试这个

     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

Answer 3

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

如果您需要该功能并且在2.1版本上，就像JSFiddle所示，您可以使用下面链接问题的答案来实现与删除的切换类似的功能。

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

在jQuery中切换加法/减法

3 个答案: