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

Question

我有这样的代码:

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

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

Answer 1

为什么不使用类？它会让你对元素进行更精细的控制，而且它使编码变得更容易:)

通过选择器操作 id 会降低性能并使代码难以维护。如果您决定在 qty1 中的 qty 和 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/