Question

我有一个用户输入价格和数量的表单，鼠标离开'数量'文本框后不久，我希望TotalPrice文本框填充Price * Quantity的结果。以下是我的jQuery代码，但是TotalPrice文本框没有填充结果。希望有人可以告诉我如何做到正确。

$("#quantity").mouseleave (function () {
    var i = $("#price").val();
    var k = $("#quantity").val();
    var total = i*k;
    $("#totalprice").val(total);
});

Answer 1

您的代码存在的问题是，只要调用ready函数，它就会立即执行。您需要将一个列表器附加到action元素

$(document).ready(function() {
    $("#quantity").mouseleave(function(){
        var i = $("#price").val();
        var k = $("#quantity").val();
        var total = i*k;    
        $("#totalprice").val(total);  
    });         
});

您可以使用各种事件列表器，例如onchange，onfocusout，blur，onkeyup，具体取决于您希望更改发生的方式和时间。有关事件类型的更多信息以及仅针对jquery的所有信息 - https://api.jquery.com/category/events/

Answer 2

您需要使用这两个文本框的blur事件处理程序。试试这个：

$(document).ready(function() {
  $("#price").on("blur", calculate);
  $("#quantity").on("blur", calculate);
  //If you want to do the calculation when the page renders:
  calculate();
});

function calculate(){
  var i = $("#price").val();
  var k = $("#quantity").val();
  var total = i*k;    
  $("#totalprice").val(total);                
}

作为下面评论中提到的trincot，您可以将两个事件合并为一行，因为它们调用相同的函数：

$("#price, #quantity").on("blur", calculate);

Answer 3

我想你想要这个

jQuery(document).ready(function($) {
    var price = $("#price");
    var qty = $("#quantity");
    var total = $("#totalprice");
    /* CREATE VARIABLES ON DOCUMENT READY, 
       BECAUSE YOU WANT TO CACHE THE DOM SELECTION */
    qty.on("blur", function(){
         var i = price.val();
         var k = qty.val();
         total.val(i * k);
    });
});

工作小提琴==＆gt; https://jsfiddle.net/tonysamperi/xqxm3900/

使用计算结果填充文本框

3 个答案: