Javascript/jQuery 使用 on change 从多个输入中获取总和

Question

我需要对一组输入中的所有值求和。 是的，我已经对 Stack 进行了一些研究，并尝试实现其中的一些。 到目前为止，要注意这篇文章中的一些答案（ How get total sum from input box values using Javascript? ）最接近，但我的总数计算错误，我不确定我的错误在哪里。 我尝试了多种方法，并且确实设置了 JSFiddle。

我使用外部元素来增加和减少输入值。 我触发了on change。 我正在安慰我的总数，第一个增量的总数得到正确的数字“1”，但任何后续的总数都会将总数更新为 4，然后更多。 即使这样减少它也只是增加值。

JSFiddle 在这里

https://jsfiddle.net/a6vnpgwL/3/

HTML

<ul class="QuantityList">
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
 <span class="plus IncDecButton">+</span>
 <span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
</ul>

JS

var totalCount = 0;

$(".IncDecButton").click(function (event)
{

    event.preventDefault();
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var newVal = oldValue;
    
    
    
    //Hide .decButton for oldValue
    if (newVal == 0 || oldValue == 0)
    {
        $button.parent().find(".minus").hide();
        oldValue = 0
    }
    else
    {
        $button.parent().find(".minus").show();
    }
    if ($button.text() == "+")
    {
        var newVal = parseFloat(oldValue) + 1;
        //totalCount += parseInt($(this).parent().find('input').val(), 10);
    }
    else
    {
        // Don't allow decrementing below zero
        if (oldValue >= 1)
        {
            var newVal = parseFloat(oldValue) - 1;
          //  totalCount -= parseInt($(this).parent().find('input').val(), 10);
        }
    }
    //Hide .decButton for newVal
    if (newVal == 0)
    {
        $button.parent().find(".minus").hide();
    }
    else
    {
        $button.parent().find(".minus").show();
    }
    //added to stop at a max quantity - 2-6-2020 - CM
    if(newVal == $button.parent().find("input").attr("max")){
         $button.parent().find(".plus").hide();
    }else{
        $button.parent().find(".plus").show();
    }
    
    $button.parent().find("input").val(newVal);


$button.parent().find('input').each(function() {
        $(this).on("change", function(){
            calculateSum();
        });
    });

$button.parent().find('input').change();




}); //End button click


function calculateSum($elem){
//$('.QuantityList input[data-requires-login="True"]').on("change", function () {
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});
console.log("total count " + totalCount);
}
//});

任何帮助深表感谢。

Answer 1

您需要每次重置 totalCount。

作为提示，只要您的 output 随着时间的推移逐渐变大，首先要寻找的是在用于添加输入的任何方法中无法重置总数。

function calculateSum($elem){
totalCount=0;
//$('.QuantityList input[data-requires-login="True"]').on("change", function () {
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});
console.log("total count " + totalCount);
}
//});

Answer 2

每次运行计算 function 时只需重置 totalCount

totalCount=0;
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});