如何處理jQuery中數字輸入的更改？

Question

我正在嘗試使用jQuery和HTML創建一個結帳菜單，但我無法獲得輸入框，以使項目數量可預測。 當我使用光標更改輸入值時，“ price”變量的輸出為“ 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小提琴。

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

小提琴在這里 。