javascript - 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 会降低性能并使代码难以维护。如果您决定-在 betweenqty和1in 中添加一个qty1怎么办？假设您拥有该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/

Answer 2

如果你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);
});