Javascript使用一个函数动态计算多行

Javascript dynamically calculate many row use one function

本文关键字：动态 函数 计算 一个 Javascript      更新时间：2023-09-26

我有这样的代码：

Qty: <input type="text" name="qty" id="qty" class="txt" value="" />
Price: <input type="text" name="price" id="price" class="txt" value="500" />
Total: <input type="text" name="total" id="total" class="txt" value="" />

Javascript：

$('#qty').keyup(function() {
     var quantity = $("#qty").val();
     var priceItem = $("#price").val();
     var total = quantity * priceItem ;
     $("#total").val(total);
});

这只是一排。如何使函数可以用于所有行？

为什么不使用类？它会让你对元素进行更精细的控制，见鬼，它会让编码更容易：）

通过选择器操作id会降低性能，并使代码难以维护。如果您决定在qty和qty1中的1之间添加-，该怎么办？假设qty字段为30次，则必须将其更改30次。

以下是您的标记：

Qty:
<input type="text" name="qty" class="txt qty" value="" />
<br/>
Price:
<input type="text" name="price" class="txt price" value="500" />
<br/>
Total:
<input type="text" name="total" class="txt total" value="" />

您的JavaScript:

然后，在您的keyup方法中：

$('.qty').keyup(function () {
    var sibs = $(this).siblings();
    var quantity = this.value;
    var priceItem = sibs.filter(".price").val();
    var total = quantity * priceItem;
    sibs.filter(".total").val(total);
});

演示：http://jsfiddle.net/hungerpain/bCKxW/

如果您的input fields id看起来像qty_1、price_1和total_1那么你可以这样做：

$('input[id^=qty]').keyup(function() {
        var quantity = $(this).val();
        var idAttr =   $(this).attr('id').split('_');
        var i = idAttr[1];
        var priceItem = $("#price_" + i).val();
        var total = quantity * priceItem ;
        $("#total_" + i).val(total);
});
相关文章：