Question

我正在尝试使用jQuery和HTML创建一个结帐菜单，但我无法让项目数量的输入框表现出可预测性。当我使用光标改变输入值时，输出的价格为＆＃39;变量是＆＃34; NaN＆＃34;。当我使用箭头键时，价格会更新一次，但在第一次更改后会失败。如何获取数字输入值，将其乘以<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.

Answer 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

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

1 个答案: