javascript - 如何将 for 循环添加到以下 JavaScript 以验证输入？

Question

这是我的 javascript，适用于单个输入字段，但我希望它适用于多个输入。
如果我尝试为 插入值，则在这里输入 类=广告 超过固定 输入 的值类=满 它不允许

var $full = $('[class=full]');
var $adv = $('[class=adv]');

$adv.on('keyup keydown', function(e) {
  var fullPay = parseInt($full.val(), 10);
  var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10

  if (advPay > fullPay &&
    e.keyCode !== 46 // keycode for delete
    &&
    e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $adv.val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="full" class="full" value="5">
<input type="number" name="adv" class="adv" />

Answer 1

有效线路:

$('[class=full]').val()

只会采用“full”类的第一个元素。
您需要在处理程序中使用相对 DOM 导航，例如:

$(this).prev().val()

与 $adv.val() 类似, 使用 $(this).val()和 $(this).val('')清除当前输入。
您也可以使用 input将捕获更多事件的事件，例如用鼠标粘贴。

$('[class=adv]').on('input', function(e) {
  var fullPay = parseInt($(this).prev().val(), 10);
  var advPay = parseInt($(this).val(), 10); 

  if (advPay > fullPay &&
    e.keyCode !== 46 // keycode for delete
    &&
    e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $(this).val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="full" class="full" value="5">
<input type="number" name="adv" class="adv" />
<br/>
<input type="number" name="full" class="full" value="55">
<input type="number" name="adv" class="adv" />
<br/>
<input type="number" name="full" class="full" value="555">
<input type="number" name="adv" class="adv" />

使用 .next()或 .prev()将意味着您的 html 很脆弱(任何微小的更改都会破坏 js) - 更好的解决方案是包装每一对:

$('[class=adv]').on('input', function(e) {

  var fullPay = parseInt($(this).closest(".inputgroup").find(".full").val(), 10);
  var advPay = parseInt($(this).val(), 10);

  if (advPay > fullPay 
    && e.keyCode !== 46 // keycode for delete
    && e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $(this).val('');
  }
});

.inputgroup { padding:5px 0 5px 0; border-bottom: 1px solid #CCC; }

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

<div class='inputgroup'>
  <input type="number" name="full" class="full" value="5">
  <input type="number" name="adv" class="adv" />
</div>

<div class='inputgroup'>
  <input type="number" name="full" class="full" value="55">
  <input type="number" name="adv" class="adv" />
</div>

<div class='inputgroup'>
  <input type="number" name="full" class="full" value="555">
  <input type="number" name="adv" class="adv" />
</div>