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会降低性能并使代码变得混乱以进行维护。如果您决定在-中的qty和1之间添加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);
});

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

2 个答案: