javascript - 字段计算

Question

我有一个表单，我需要在用户输入数字时对某些数字字段执行一些计算。我为表单制作了 HTML，下面我有这段 JavaScript 代码，但它不起作用。

jQuery(function($) {

  // define the variables for fields
  var child1 = $('pdb-male').val();
  var child2 = $('pdb-female').val();
  var child3 = $('pdb-unknown_sex').val();

  var value = child1 + child2 + child3;

  var result = $('pdb-number');

  // set listener on male field
  child1.on('keyup', function() {

    // do the calculation and output the result on the field
    result.val(value);
  });

  // set listener on female field    
  child2.on('keyup', function() {

    // do the calculation and output the result on the field
    result.val(value);
  });

  // set listener on unknown_sex field    
  child3.on('keyup', function() {

    // do the calculation and output the result on the field
    result.val(value);
  });

  // set the trigger on fields 
  child1.trigger('keyup');
  child2.trigger('keyup');
  child3.trigger('keyup');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

• 假设它们是 ID，您需要在每个选择器前面加上 #
• 将 var 声明移到事件处理程序中
• 将值转换为数字。
• 重用事件处理器
• 使用一个类——这样就更简单了:

$(function() {
 $(".person").on("input", function() {      
    var total = 0;
    $(".person").each(function() { total += +this.value })
    $('#pdb-number').val(total); 
  }).trigger("input")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Male:<input class="person" type="text" id="pdb-male" value="" /><br/> 
Female: <input class="person" type="text" id="pdb-female" value="" /><br/> 
Unknown: <input class="person" type="text" id="pdb-unknown_sex" value="" /><br/>
Total: <input type="text" readonly id="pdb-number" />