我在HTML中有以下标记：
<div class="rf-row count-container">
<input class="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly">
</div>
<div class="sub-rf-row">
<input class="add-monthly">
</div>
<div class="sub-rf-row template">
<input class="add-monthly">
</div>
</div>
我想将每个子 rf 行(不包括模板子 rf-rows(中带有类"每月添加"的所有输入添加到 rf-row(它是父级(中的"每月总和"中。
我想在用户输入之前计算总和值(在 document.ready 上(。以及在每月添加的输入之一上的"keyup"事件上动态更新它。
如何在jQuery中最好地做到这一点？
你可以做这样的事情...
$(document).ready(function()
{
updateValues()
$('.sub-rf-row').keyup(updateValues);
});
function updateValues()
{
var sum=0;
$('.sub-rf-row:not(.template) input').each(function(){
sum+=parseInt($(this).val()=='' ? 0 : $(this).val());
});
$('.sum-monthly').val(sum);
}
https://jsfiddle.net/rt42fz9q/13/
为了实现您的目标，您需要引用所需的input字段，遍历它们并计算它们的总和，最后将该总和放在.add-monthly字段中。但是您注意某些字段中可能存在的非数字值，因此，在下面的sumUpdate函数中，仅当该值是有效数字时，我才将input字段的值添加到总和中，也允许十进制数字。
这里有一个片段来说明所说的所有内容：
$(function(){
var sumInput = $('.rf-row input.sum-monthly'),
/* the 'sumInput' variable is the input field that will display the sum of the other inputs */
inputs = $('.sub-rf-row:not(.template) input.add-monthly');
/* the 'inputs' variable is an array containing the input fields with the class '.add-monthly' that are under '.sub-rf-row' element which doesn't have a '.template' class */
// Call the updateSum function to calculate the sum directly after the document has loaded.
updateSum();
// Adding KeyUp event listener to the inputs
inputs.on('keyup', updateSum);
// Implementation of the updateSum function that will calcule the sum of the input fields.
function updateSum() {
sum = 0;
inputs.each(function() {
var val = +$(this).val(); // Notice the plus sign in front of $(this).val() with we cast the input value to an integer, the val variable could contain of value of NaN if the input value can't be casted to an input(in other words if the input value contains non-numeric characters). With that we also allow decimal numbers.
sum += (val.toString() != 'NaN') ? val:0; // We only add valid numbers, otherwise we add 0 to the sum variable.
});
sumInput.val(sum.toFixed(2).replace('.00', '')); // Assign the sum variable's value to the sumInput, allowing precision to only 2 decimal digits, and also stripping '.00' from the sum variable if it contains a natural number(like 2.00 => 2, 10.00 => 10, but any decimal number will remain the same: 2.8 => 2.80, 12.97 => 12.97).
}
});<!-- I added some values for the input fields with '.add-monthly' class just to show that the 'updateSum' function executes when the document is loaded -->
<div class="rf-row count-container">
<input class="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly" value="2.4">
</div>
<div class="sub-rf-row">
<input class="add-monthly" value="8.2">
</div>
<div class="sub-rf-row template">
<input class="add-monthly">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Ps：我在上面的代码中添加了一些有用的注释，请尝试阅读它们，因为它们可能会对您有所帮助。
希望我能把你推得更远。
这可能会对你有所帮助
<!DOCTYPE html>
<html>
<head>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="rf-row count-container">
<input class="sum-monthly">
<div class="sub-rf-row">
<input class="add-monthly" value="5">
</div>
<div class="sub-rf-row">
<input class="add-monthly" value="5">
</div>
<div class="sub-rf-row template">
<input class="add-monthly" value="5">
</div>
</div>
<script>
$(document).ready(function(){
var value = 0;
$('.count-container .sub-rf-row').each(function(){
value += parseInt($(this).find('.add-monthly').val()) ? parseInt($(this).find('.add-monthly').val()) : 0
})
$('.sum-monthly').val(value);
});
</script>
</body>
</html>
https://codepen.io/anon/pen/gdpZpR?editors=1010