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

我想使用jquery根据为这两个字段设置的最大值来平衡两个输入数字字段。例如，它就像一个天平，如果一方下降，另一方上升，反之亦然。另一个例子是，如果最大值是20，那么如果我在输入字段1中输入5，那么在输入字段2中将保留15。

---

需要帮助，谢谢。尚未开始编写代码，但仍在努力解决它。

这里有一个小提琴，可以让您开始（也许完成）：

html:

---

这里有一把小提琴可以让你开始（也许也可以完成）：

html:

---

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

注意：这允许您添加任意数量的输入，并且将 平衡他们所有人。只需记住将

balance

类添加到 输入字段

var总计=20；
$（'.balance'）。在（'input'，function（）上{
var value=parseInt（this.value）；
如果（isNaN（值））{
这个值=value=0；
}否则如果（值>总计）{
该值=总值=总值；
}/*else if（值<0）{
这个值=value=0；
}
*如果值不应为负值，请删除此注释。
*/
var剩余=总价值；
var otherInputs=$（'.balance'）；
其他输入。拼接（$.inArray（此，其他输入），1）；
var remainderDiv=余数/otherInputs.length；
$.each（其他输入，函数（输入）{
其他输入[input]。值=remainderDiv；
});
});
首先，您需要在所有相关输入字段上附加输入事件处理程序。此事件处理程序将比较输入字段的当前输入值与total/max value变量，并相应地找到余数。然后，事件处理程序查找其他输入字段，并为其分配适当的余数值

注意：这允许您添加任意数量的输入，并且将
平衡他们所有人。只需记住将
balance
类添加到
输入字段


var总计=20；
$（'.balance'）。在（'input'，function（）上{
var value=parseInt（this.value）；
如果（isNaN（值））{
这个值=value=0；
}否则如果（值>总计）{
该值=总值=总值；
}/*else if（值<0）{
这个值=value=0；
}
*如果值不应为负值，请删除此注释。
*/
var剩余=总价值；
var otherInputs=$（'.balance'）；
其他输入。拼接（$.inArray（此，其他输入），1）；
var remainderDiv=余数/otherInputs.length；
$.each（其他输入，函数（输入）{
其他输入[input]。值=remainderDiv；
});
});

你试过什么了吗，逻辑似乎很简单->
value2=20-value1
等等。是的，我试过，但放弃了。我不知道如何使用jquery编写函数。它没有平衡两个字段，我将类设置为输入字段1和输入字段2，但在函数中，它没有根据我放置的类捕获它们。如果您需要代码方面的帮助，您应该向我们展示您的代码。您尝试过什么吗，逻辑似乎很简单->
value2=20-value1
等等。是的，我试过了，但放弃了。我不知道如何使用jquery编写函数。它没有平衡两个字段，我将类设置为输入字段1和输入字段2，但在函数中，它没有根据类i位置捕捉它们。如果您需要代码方面的帮助，你应该给我们看看你的代码。我怎么能在javascript中传递一个计数器变量呢？我不明白你的意思。好的，别担心，我已经完成了。现在我想知道如何在jquery中为类名添加计数器，比如$（'.balance'+i）.attr{}。。如果这是正确的，或者$（'.balance'+i+''）.attr{}。好的，您将如何做，以确保余数不在输入字段2中。但是当用户输入一个值时，它仍然应该互相负。如果max=10。当用户在字段1中输入5，在字段2中输入零时，这是正确的。但如果他在第一场投5分，在第二场投6分，那就不正确了。我怎样才能使用您的代码做到这一点。@Lee添加了一个更新，该更新不允许输入高于最大定义变量。我怎样才能在javascript附录中传递计数器变量？我不明白您的意思。好的，别担心，我已经完成了。现在我想知道如何在jquery中为类名添加计数器，比如$（'.balance'+i）.attr{}。。如果这是正确的，或者$（'.balance'+i+''）.attr{}。好的，您将如何做，以确保余数不在输入字段2中。但是当用户输入一个值时，它仍然应该互相负。如果max=10。当用户在字段1中输入5，在字段2中输入零时，这是正确的。但如果他在第一场投5分，在第二场投6分，那就不正确了。“我如何使用您的代码来实现这一点。@Lee添加了一个更新，该更新不允许输入值高于定义的最大值。好的，您将如何实现，以使剩余值不进入输入字段2中。”。但是当用户输入一个值时，它仍然应该互相负。如果max=10。当用户在字段1中输入5，在字段2中输入零时，这是正确的。但如果他在第一场投5分，在第二场投6分，那就不正确了。我怎样才能用你的代码做到这一点。好的，你怎么做，剩下的部分不在输入字段2中。但是当用户输入一个值时，它仍然应该互相负。如果max=10。当用户在字段1中输入5，在字段2中输入零时，这是正确的。但如果他在第一场投5分，在第二场投6分，那就不正确了。我怎样才能用你的代码做到这一点。
<input type='number' id='first' class='balancable'/>
<input type='number' id='second' class='balancable'/>

$(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);
    });
});