的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

爲什麼不使用類？它會給你更好的控制你的元素和heck，它使編碼更容易:)

通過選擇器操縱ID降低性能，並使代碼混亂維護。如果您決定在和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); 
});