如何处理 jQuery 中的数字输入更改？答案

【问题标题】：How do I handle number input changes in jQuery?如何处理 jQuery 中的数字输入更改？
【发布时间】：2016-03-20 19:48:11
【问题描述】：

我正在尝试使用 jQuery 和 HTML 创建一个结帐菜单，但我无法让项目数量的输入框以可预测的方式运行。当我使用光标更改输入值时，“价格”变量的输出为“NaN”。当我使用箭头键时，价格会更新一次，但在第一次更改后失败。如何获取数字输入值，将其乘以<p> 标签中的文本（价格），并在每次增加或减少数字时更新文本？到目前为止，我自己已经掌握了这么多：

这是我的 HTML：

<input id="quantity" size="30" type="number" value="1" />
<p id="total">29.99</p>

还有我的 JS：

$(document).ready(function() {
  function updatePrice() {
  var num = parseInt($("#quantity").val());
  var price = (num) * parseFloat($("#total").text());
  var total = price.toFixed(2);
  $("#total").replaceWith(total);
}
$(document).on("change, keyup, input", "#quantity", updatePrice);
});

JS Fiddle.

【问题讨论】：

jsfiddle.net/k5om53o8/1 喜欢这样吗？
使用光标更改数字时不会更新。它还会不断更新而不刷新，因此即使框中的数字保持不变，一遍又一遍地按 Enter 按钮会提高价格。
你是对的，没明白，修复在这里：jsfiddle.net/k5om53o8/2
如果您将此作为答案发布，我将承认它是正确答案。如果您不介意，我确实有一个后续问题。假设我有几个输入框和几个价格列表（在结帐菜单中很典型），我如何使用 index() 以便我可以确保仅在数量框为那个项目被改变了？我计划将<p> 标签中的所有价格相加得到总价。
你能提供一些标记作为例子吗？

标签： javascript jquery html input numbers

【解决方案1】：

只需进行少量更改即可使您的代码正常工作。请注意，您仍然需要处理负数（按字段属性？）以及 0。

$(document).ready(function() {
    // grep the price only once...
    var price = parseFloat($("#total").text());        
    function updatePrice() {        
        var sum, num = parseInt($(this).val(),10);
        // if we have a number
        if(num) {
          // update info text
          sum = num * price;
          $("#total").text(sum.toFixed(2));
        }
    }
    $(document).on("change, mouseup, keyup", "#quantity", updatePrice);
});

Fiddle is here.

【讨论】：

@PiraX 看看这个jsfiddle.net/2j1e22me/2 的多个字段，我已将“ID”价格修改为“价格”类，因为 ID 必须是唯一的。
啊，你真是天赐良机。非常感谢。