Question

我在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行）中所有带有类“ add-monthly”的输入添加到rf-row（它的父级）中的“ sum-monthly”。

我想在用户输入之前（在document.ready上）计算总和值。以及在添加每月输入之一的“ keyup”事件中动态更新它。

如何最好地在jQuery中做到这一点？

Answer 1

您可以执行以下操作...

 $(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/

Answer 2

为了实现您的目标，您需要引用所需的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：我在上面的代码中添加了一些有用的注释，请尝试阅读它们，因为它们可能会对您有所帮助。

希望我进一步推动了你。

Answer 3

这可能对您有帮助

    <!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

如何在可重复字段容器内动态求和输入值？

3 个答案: