Question

所以我有3个输入框，我想用它在一个只读输入框中的那些框中取平均值，而无需单击任何按钮（只需更改值即可）。

这是html：

input1: <input name="1" id="1" value="" ><br>
input2: <input name="2" id="2" value="" ><br>
input3: <input name="3" id="3" value="" ><br><br>
output: <input name="output" id="4" value="" readonly>

这是脚本：

var input = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
	input4 = $('[name="output"]');
input.change(function () {
    var val1 = (isNaN(parseInt(input1.val()))) ? 0 : parseInt(input1.val());
    var val2 = (isNaN(parseInt(input2.val()))) ? 0 : parseInt(input2.val());
    var val3 = (isNaN(parseInt(input3.val()))) ? 0 : parseInt(input3.val());
    input4.val((val1 + val2 + val3)/3);
});

但是，我希望在不填充所有3个输入框的情况下获得平均值，并且分频器基于我输入的文本框数量。就像我在textbox1和textbox2中输入值时，输出类似于（textbox1 + textbox2）/ 2，而不是（textbox1 + textbox2 + 0）/ 3。

我非常确定问题出在“ input4.val（（val1 + val2 + val3）/ 3）;”中线。但是我不知道如何编写正确的代码

Answer 1

您可以使用 input 事件代替更改。您可以使用filter()和map()来获取非空输入数组。然后使用reduce()求和，最后将其除以数组长度即可得到结果。

尝试以下操作：

var input = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
    input4 = $('[name="output"]');
input.on('input', function (el) {
    var vArray = input.filter(function(i,el){
      return !isNaN(this.value.trim()) && $(el).val().trim() != "";
    }).map((j,k) => Number(k.value)).get();
    var res = '';
    if(vArray.length > 0)
      res = vArray.reduce((a,c) => a+c,0)/vArray.length;
    input4.val(res);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
input1: <input name="1" id="1" value=""><br>
input2: <input name="2" id="2" value="" ><br>
input3: <input name="3" id="3" value="" ><br><br>
output: <input name="output" id="4" value="" readonly>:

Answer 2

jQuery版本

$('input.input').on('blur', function() {

  let values = [];

  $('input.input').each(function() {

    let value = $(this).val();

    if (value && !isNaN(value) && !(/^ *$/.test(value))) {

      values.push(Number($(this).val()));
    }
  });

  if (values.length) {

    $('input.output').val(values.reduce(function(a, b) {
      return a + b;
    }) / values.length);

  } else {

    $('input.output').val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputs">
  input1: <input class="input" name="1" id="1" value=""><br> input2: <input class="input" name="2" id="2" value=""><br> input3: <input class="input" name="3" id="3" value=""><br><br>
</div>

output: <input class="output" name="output" id="4" value="" readonly>

在不填写所有字段且没有按钮的情况下获取平均值

2 个答案: