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