Question

我想根据为两者设置的最大值，使用jquery平衡两个输入数字字段。例如它就像一个平衡，如果一方向下，另一方向上，反之亦然。另一个例子，如果最大值是20，那么如果我在输入字段1中输入5，那么15将保留在输入字段2中。需要帮助谢谢。还没有开始编码，因为它仍然试图解决它。

Answer 1

这是一个让你开始（也许已经完成）的小提琴：

https://jsfiddle.net/ahmadabdul3/xwyrrw53/1/

HTML：

<input type='number' id='first' class='balancable'/>
<input type='number' id='second' class='balancable'/>

JS：

$(function() {
    var max = 20;
    var balanceOpposite = {
      'first': 'second',
      'second': 'first',
    }
    $('.balancable').on('input', function() {
      var id = $(this).attr('id');
      var thisVal = $(this).val();
      $('#' + balanceOpposite[id]).val(20 - thisVal);
    });
});

Answer 2

首先，您需要在所有相关输入字段上附加输入事件处理程序。此事件处理程序将输入字段的当前输入值与总/最大值变量进行比较，并相应地查找余数。然后，事件处理程序查找其他输入字段并为其分配适当的余数值。

注意：这允许您根据需要添加任意数量的输入平衡他们。只需记住在上添加balance类输入字段。

＆＃13;

var total = 20;
$('.balance').on('input', function() {
  var value = parseInt(this.value);
  if (isNaN(value)) {
    this.value = value = 0;
  } else if (value > total) {
    this.value = value = total;
  }/* else if (value < 0) {
    this.value = value = 0;
  }
  * Remove this comment if value shouldn't be negative.
  */
  var remainder = total - value;
  var otherInputs = $('.balance');
  otherInputs.splice($.inArray(this,otherInputs),1);
  var remainderDiv = remainder/otherInputs.length;
  $.each(otherInputs, function(input) {
      otherInputs[input].value = remainderDiv;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="balance">
<input type="number" class="balance">

＆＃13;

更新：两个输入可能小于最大但不会更高。

＆＃13;

var max = 20;
$('.balance').on('input', function() {
  var value = parseInt(this.value);
  if (isNaN(value)) {
    value = 0;
  }
  var otherInputs = $('.balance');
  var sum = 0;
  $.each(otherInputs, function(input) {
      sum += parseInt(otherInputs[input].value);
  });
  if (sum > max)
    this.value = max - (sum - value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="balance">
<input type="number" class="balance">

＆＃13;

在jquery中平衡两个输入数字字段

2 个答案: