jQuery / Javascript 和按預期計算

Question

我正在計算更改時的數字輸入總數，這是我的輸入：

<input type="number" class="qty mnm-quantity" step="3" min="0" max="9" name="mnm_quantity[197]" value="" title="Qty" size="4" placeholder="0" inputmode="numeric">
<input type="number" class="qty mnm-quantity" step="3" min="0" max="9" name="mnm_quantity[198]" value="" title="Qty" size="4" placeholder="0" inputmode="numeric">
<input type="number" class="qty mnm-quantity" step="3" min="0" max="9" name="mnm_quantity[199]" value="" title="Qty" size="4" placeholder="0" inputmode="numeric">

然后我有以下腳本做總和：

var totalitems = 0;

$( ".mnm-quantity" ).each(function() {
        
    $(this).on('change', function() {
            
        totalitems += parseInt($(this).val());
            
        var quantity = $('.wc-pao-addon-select').find(":selected").data('label');
            
        if(totalitems >= quantity){
            $('.mnm-quantity').prop('readonly', true);
        }

        console.log(totalitems);
            
    });   
}); 

當我增加每個字段的數量時，總和計算正確。 在上面的 console.log 中，我得到 3、6 和 9。

但是，如果我只增加一個字段的數量，console.log 輸出 3，然后輸出 9，然后只讀 function 啟動。看起來它添加 3，然后下一步（3）是 6 ，使 9。

這可以通過增加 3 個單獨字段的方式解決嗎？

Answer 1

您需要一個更改事件偵聽器，並且在每次更改時，您都需要重新計算值

$(".mnm-quantity").on('change', function() {
var totalitems = 0;
$(".mnm-quantity").each(function(i,e) {
        totalitems += $.isNumeric(e.value) ? parseInt(e.value) : 0;
}); 
console.log(totalitems);
});