我怎么能等到第一列中的所有表行都为 100 才能在第二列中显示"done"

Question

>我有一个表，行数是动态的，取决于数据库记录。因此，无论表行数如何，当第一列中的所有行均为 100 时，第二列中的所有行将显示"完成"。

现在，当我在第 100 行输入 100 时，第 2 列中的所有行将显示"完成"。我怎么能等到第一列中的所有行都是 100 才能显示"完成">

$(".test").on('keyup', function() {
  var set = $('.test').val();
  if (set == 100 ) {
   $('.result').val("done");
     }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" class="test">
<td><input type="text" class="result">
</tr>
<tr>
<td><input type="number" class="test">
<td><input type="text" class="result">
</tr>
<tr>
<td><input type="number" class="test">
<td><input type="text" class="result">
</tr>

Answer 1

这是实现它的方法之一。而不是keyup ，您可以使用input事件。

在每个事件中，您检查所有输入字段是否都有值。

如果所有字段

都有值，请检查是否所有字段的值均为 100。

$(".test").on('input', function() {
  checkAndUpdateSecondColumn();
});
function checkAndUpdateSecondColumn() {
  var empty = $("input.test").filter(function() {
    return this.value != "";
  });
  if ($("input.test").length == empty.length) {
    var sum = $('.test').toArray().reduce(function(sum, element) {
      return sum + Number(element.value);
    }, 0);
    $('.result').val('');
    if (sum == $("input.test").length * 100) {
      $('.result').val('done');
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="number" class="test">
      <td><input type="text" class="result">
  </tr>
  <tr>
    <td><input type="number" class="test">
      <td><input type="text" class="result">
  </tr>
  <tr>
    <td><input type="number" class="test">
      <td><input type="text" class="result">
  </tr>

Answer 2

代码的问题在于，当你分配变量set时，你试图读取包含多个 DOM 元素的 jQuery 集合的.val()。 返回第一个匹配元素的值;其他的不被评估。

听起来您要做的是评估整个集合，并确保所有集合都与您想要的值匹配，然后再显示"完成"消息。 实现此行为的一种方法是根据 jQuery 集合中每个元素的值(类 "test" 的每个元素(进行过滤。

var testInputs = $('.test');
var desiredValue = 100;
testInputs.on('keyup', function() {
    var testInputsSetToDesiredValue = testInputs.filter(function() {
        return parseInt(this.value, 10) === desiredValue;
    });
    if (testInputsSetToDesiredValue.length === testInputs.length) {
        $('.result').val('done');
    }
});