for循環中第3個輸入字段中的2個輸入字段的值相乘

Question

我遇到輕微問題。我有一個For循環我正在創建多個3輸入字段（Quantity，Rate，Price）。我使用的JavaScript 功能得到「量」 & 「費率」的ID和顯示3個輸入「價格」的產品。我的問題是，在for循環中，我僅通過使用Id &獲得第一條記錄的產品，其餘'價格'輸入不捕獲其各自'數量'產品的產品&'比率'輸入。我如何設法使用多個3輸入來實現這個功能？請幫助我，我會非常感激。

請參見輸入項的形象在這裏

HTML代碼：

<?php 
    $total = $total_entries; 
    for($i=0; $i<$total; $i++){ 
?> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="item">Item</label> 
       <input type="text" class="form-control" name="item[]"> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="quantity">Quantity</label> 
       <input id="quantity" type="number" class="form-control" name="quantity[]"> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="rate">Rate</label> 
       <input id="rate" type="text" class="form-control" name="rate[]"> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="price">Price</label> 
       <input id="price" type="number" class="form-control" name="price[]"> 
      </div> 
     </div> 

     <?php } ?> 

    </div> 
</div> 

JavaScript函數：

<script> 
    $('#quantity, #rate').change(function(){ 
     var rate = parseFloat($('#quantity').val()) || 0; 
     var box = parseFloat($('#rate').val()) || 0; 
     $('#price').val(rate * box);  
    }); 
</script> 

Answer 1

試試這個，

<?php 
    $total = $total_entries; 
    for($i=0; $i<$total; $i++){ 
?> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="item">Item</label> 
       <input type="text" class="form-control item" name="item[<?php echo $i; ?>]"> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="quantity">Quantity</label> 
       <input id="quantity_<?php echo $i; ?>" type="number" class="form-control quantity" name="quantity[<?php echo $i; ?>]"> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="rate">Rate</label> 
       <input id="rate_<?php echo $i; ?>" type="text" class="form-control rate" name="rate[<?php echo $i; ?>]"> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <label for="price">Price</label> 
       <input id="price_<?php echo $i; ?>" type="number" class="form-control price" name="price[<?php echo $i; ?>]"> 
      </div> 
     </div> 

     <?php } ?> 

    </div> 
</div> 

JavaScript函數：

<script> 
    $('.quantity, .rate').change(function(){ 
     var rate = parseFloat($(this).closest(".row").find(".quantity").val()) || 0; 
     var box = parseFloat($(this).closest(".row").find(".rate").val()) || 0; 
     $(this).closest(".row").find(".price").val(rate * box);  
    }); 
</script> 

你使用普通的ID爲多個元素，所以只考慮一個因素，而不是考慮必需的元素，

Class是識別相似的元素。

Id是唯一標識元素的標識符。