我有多個輸入（類 .fat-calc1 - .fat-calc24）和一個結果位置（類 fat-result）。我想創建一個回圈來添加輸入（.fat-calc1 .fat-calc2 ... .fat-calc24）并將其顯示在結果 div 中。
<div class='fat-calc-col'>
<input type='number' name='fat-calc1"' class='fat-calc fat-calc1'>
<input type='number' name='fat-calc2"' class='fat-calc fat-calc2'>
<input type='number' name='fat-calc2"' class='fat-calc fat-calc2'>
...
<div class='calc-result fat-result'></div>
</div>
$(".fat-calc-col").children().on('input', function(e){
var fat = [];
let result = "";
for (let x = 1; x <= 24; x ) {
fat[x] = parseFloat($(".fat-calc" x).val());
fat[x] = fat[x] ? fat[x] : 0;
result = fat[x];
}
$(".fat-result").text(result);
});
當您鍵入 1 (input1) 和 3 (input2) 時，結果不是 4，而是 130000000000000000000000。我試圖將 parseFloat 添加到我能做的所有內容中，但它沒有用。為什么會這樣？如何解決？
uj5u.com熱心網友回復：
您將其全部添加到字串中。改成
let result = "";
它
let result = 0;
uj5u.com熱心網友回復：
如果您需要做的只是對欄位的值求和.fat-calc，那么您的代碼遠比它需要的復雜。您不需要陣列，也不需要for24 個任意值的回圈。
要執行您需要的操作，只需遍歷input元素并對它們的值求和。這可以使用reduce()
const $result = $('.fat-result');
const $inputs = $('.fat-calc').on('input', () => {
const sum = $inputs.get().reduce((acc, el) => acc = el.value, 0);
$result.text(sum);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<input type="number" name="fat-calc1" class="fat-calc fat-calc1" />
<input type="number" name="fat-calc2" class="fat-calc fat-calc2" />
<input type="number" name="fat-calc2" class="fat-calc fat-calc2" />
<div class="calc-result fat-result"></div>uj5u.com熱心網友回復：
130000000000000000000000您的輸出而不是簡單的原因4是因為您連接字串而不是添加整數。
你認為你的代碼在做什么1 3 0 0 0 ... 0 = 4，但實際上，你在做什么"" 1 3 0 0 ... 0。由于一個字串開始鏈，最終結果將是一個字串。它的評估如下：
"" 1 3 0 0 ... 0
"1" 3 0 0 ... 0
"13" 0 0 ... 0
"130" 0 0 ... 0
"1300" 0 0 ... 0
"130000000000000000000000"
解決它的一種方法是在開始時確保result = 0。試試這個代碼：
$(".fat-calc-col").children().on('input', function(e){
var fat = [];
let result = 0; // 0, not ""
for (let x = 1; x <= 24; x ) {
fat[x] = parseFloat($(".fat-calc" x).val());
fat[x] = fat[x] ? fat[x] : 0;
result = fat[x];
}
$(".fat-result").text(result);
});
但這也是不必要的。您可以使用Rory McCrossan 的答案進行更好的設定。此處代碼供參考（點擊展開）：
顯示代碼片段
const $result = $('.fat-result');
const $inputs = $('.fat-calc').on('input', () => {
const sum = $inputs.get().reduce((acc, el) => acc = el.value, 0);
$result.text(sum);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<input type="number" name="fat-calc1" class="fat-calc fat-calc1" />
<input type="number" name="fat-calc2" class="fat-calc fat-calc2" />
<input type="number" name="fat-calc2" class="fat-calc fat-calc2" />
<div class="calc-result fat-result"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/511545.html