JavaScript多輸入onChange

Question

我遇到了問題。在基於Zend框架的應用程序中有一個購物車（如表格所示）。每行都是購物籃中的產品。每行有兩個表單字段：數量和值（=價格*數量）。

我想數量（價格*數量）與onChange事件使用JavaScript來更改值，但我不知道怎麼跟>給出的foreach循環的1輸入行數做到這一點Zend視圖。

有沒有JavaScript中的任何通用算法來解決這個問題？

Answer 1

是否每個值字段都有例如可以從數量字段的ID派生的ID屬性？如果是這樣，那麼它非常快速和無痛。鑑於：

<table id="basket"> 
    <tr class="basket-row"> 
     <td class="basket-quantity"> 
      <input type="text" id="product1234_quantity"> 
     </td> 
     <td class="basket-subtotal"> 
      <input type="hidden" id="product1234_unitprice" value="20"> 
      <input type="text" readonly="readonly" id="product1234_subtotal"> 
     </td> 
    </tr> 
    <tr class="basket-row"> 
     <td class="basket-quantity"> 
      <input type="text" id="product5678_quantity"> 
     </td> 
     <td class="basket-subtotal"> 
      <input type="hidden" id="product5678_unitprice" value="30"> 
      <input type="text" readonly="readonly" id="product5678_subtotal"> 
     </td> 
    </tr> 
</table> 

在這裏，每個產品的單價是在一個隱藏的屬性，但我不知道你的購物車在哪裏存儲它。假設您可以從某處獲得它，並假設jQuery。

$('#basket').on('change','.basket-quantity input',function(e) { 
    $('#'+this.id.replace('_quantity','_subtotal')).val(Number($('#'this.id.replace('_quantity','_unitprice')))*Number(this.value)); 
}); 

如果你也無法從其他ID的ID，你必須做一些更復雜的DOM查詢，但問題是，在處理程序運行時，你必須弄清楚什麼輸入你」重新更新。

您沒有指定您正在使用的框架（如果有）。在普通的JS中，這需要很多額外的代碼才能使它跨瀏覽器兼容，以標準化事件附件和處理。

Answer 2

在每個可

$(this).index() 

e.g

$("#jieguo_qian table tr:nth-child(4) td").each(function(){ 
    var tindex = $(this).index() + 1; 

，讓你可以在DIFF TR

th th th 
td td td 
td td td