Question

我正在尝试获取特定类别的输入字段的总和，并将总和转储到单独的输入字段中，并且它无法按预期工作。

当我尝试使用单个输入字段进行添加时，它可以正常工作，但是当有多个输入使用相同的类进行求和时，会产生NaN。

以下是我正在尝试做的一个演示，它不起作用。

https://www.w3schools.com/code/tryit.asp?filename=FQ7RM8CBI064

有人能告诉我我做错了吗？

Answer 1

有两个问题。你总结了每一个变化（而不仅仅是3个数字）。你没有处理空的输入。

$(document).ready(function () {
    $('.add').change(function() {
        var sum = 0; // Recompute total sum per change.
        $('.addprice').each(function() {
               var x = $(this).val(); // Get the number and make sure it exists.
               sum += parseFloat(x || 0); 
        });
        $('#addsubTotal').val(sum);
        alert(sum);
    });
});

Answer 2

进行以下验证

检查每个输入是否为数字
在每次循环添加之前将总和设为零

＆＃13;

$(document).ready(function () {
	var sum = 0;
	$('.add').change(function() {
        sum = 0;
		$('.addprice').each(function() {
            if($(this).val()){
               sum += parseFloat($(this).val()); 
           }
		});
		$('#addsubTotal').val(sum);
		alert(sum);
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Input field: <input type="text" class="add addprice" value=""></p>
<p>Input field: <input type="text" class="add addprice" value=""></p>
<p>Input field: <input type="text" class="add addprice" value=""></p>

Sum: <input type="text" id="addsubTotal" value=""></p>

＆＃13;

Answer 3

我做了一些改变。试试这个代码我希望这会对你有帮助。

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function () {

        $('.add').change(function() {
        var sum = 0;
            $('.addprice').each(function() {
            console.log(!(isNaN($(this).val())))
            if((!(isNaN($(this).val()))) && $(this).val())
            {              
            sum = sum + parseFloat($(this).val()); 
            }
            });
            $('#addsubTotal').val(sum);
            alert(sum);
        });
    });
    </script>
    </head>
    <body>

    <p>Input field: <input type="text" class="add addprice" value=""></p>
    <p>Input field: <input type="text" class="add addprice" value=""></p>
    <p>Input field: <input type="text" class="add addprice" value=""></p>

    Sum: <input type="text" id="addsubTotal" value=""></p>


    </body>
    </html>

JQuery具有相同类的多个输入的总和不能正常工作

3 个答案: