jQuery两个数字输入，如果另一个输入被更改，则自动重新计算每个输入

Question

我对html很好，但是对javascripting却不是很好：(我已经在stackoverflow上搜索了很多，并用谷歌搜索了它，但是没有找到我真正需要的东西，只有我发现与我差不多的东西需要的是http://jsfiddle.net/mrobin/QWSQp/64/

但是我需要两个输入：

<input type="text" name="num1" maxlength="15" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" value="">
<input type="text" name="num2" maxlength="15" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" value="" >

两者都设置有规则，即只有一个DOT的数字才可用：

oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');

现在的问题，我有一个由php认证的X值

<?=$eur_price ?>

Point正在创建两个输入，其中一个是数量，第二个是总价格，但是每个字段都可以编辑，如果一个字段被编辑，则应重新计算另一个字段。

例：

X = 1.5（设定价格）... Num1 = 10，因此Num2将计算为15

X = 1.5（设置价格）... Num2 = 6，因此Num1将被计算为4，依此类推...这样您就可以设置您需要多少或您想花费多少...

任何帮助如何做到这一点，或如何编辑我发现的例子？

Answer 1

如果使用addEventListener，则可以通过一个事件来执行此操作，只需检查num1或num2是否已更改，num2是否已更改，calc num1是否已计算，calc1 num2是否已更改；

这是下面的一个简单示例。

 const euro = 1.5; const num1 = document.querySelector("[name=num1]"); const num2 = document.querySelector("[name=num2]") document.body.addEventListener("input", function (evt) { if (evt.target === num1) { num2.value = (parseFloat(num1.value) * euro).toFixed(3); } else { num1.value = (parseFloat(num2.value) / euro).toFixed(3); } }); 

 <input type="text" name="num1" maxlength="15"> <input type="text" name="num2" maxlength="15"> 

Answer 2

分开逻辑中的职责以重用代码

• 创建一个事件，即： calculate并将其绑定到num2 。
• 从num1 input事件中分派该事件。

  前两个步骤必须应用于元素num2 。

• 将id添加到您的输入中以获得更好的性能。
• 移动您的逻辑以接受数字和一个点到事件input 。

看看这个代码片段

通过这种方法，您可以从任何地方触发事件计算

 const calculate = new Event('calculate'); let n1 = document.getElementById("num1"); let n2 = document.getElementById("num2"); let eurPrice = 1.5; // -------- num1 logic --------- n1.addEventListener("input", function(e) { this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1'); n2.dispatchEvent(calculate); }); n1.addEventListener('calculate', function(e) { this.value = (n2.value / eurPrice).toFixed(2); }); // -------- num2 logic --------- n2.addEventListener("input", function(e) { this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1'); n1.dispatchEvent(calculate); }); n2.addEventListener('calculate', function(e) { this.value = (n1.value * eurPrice).toFixed(2); }); 

 <input type="text" id="num1" name="num1" maxlength="15" value=""> <input type="text" id='num2' name="num2" maxlength="15" value="">