表格計算，只有第一場作品

Question

我需要對所有價格進行求和並將它們與數量相乘。問題是隻有第一個領域計算好，其他領先的價格值。請幫助 這是我來到現在：

$('.orderForm__item').on('input', function() { 
 
    var totalSum = 0; 
 
    $('.quantity, .price').each(function() { 
 
    var quantity = $(this).val(); 
 
    var price = $('.price').attr('value'); 
 

 
    if ($.isNumeric(quantity)) { 
 
     totalSum += parseFloat(quantity) * parseFloat(price); 
 
    } 
 
    }); 
 
    $('#total').text(totalSum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" class="orderForm"> 
 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="1.70">(1.70 KM)</span><br> 
 
    </div> 
 

 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="3">(3.0 KM)</span><br> 
 
    </div> 
 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="15">(15 KM)</span><br> 
 
    </div> 
 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="1.7">(1.70 KM)</span><br> 
 
    </div> 
 
</form> 
 
Total: <output id="total"></output>

Answer 1

你應該each爲orderForm__item和發現quantity，price每件：

$('.orderForm__item').on('input', function() { 
 
    var totalSum = 0; 
 
    $('.orderForm__item').each(function() { 
 
    var quantity = $(this).find('.quantity').val(); 
 
    var price = $(this).find('.price').attr('value'); 
 

 
    if ($.isNumeric(quantity)) { 
 
     totalSum += parseFloat(quantity) * parseFloat(price); 
 
    } 
 
    }); 
 
    $('#total').text(totalSum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" class="orderForm"> 
 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="1.70">(1.70 KM)</span><br> 
 
    </div> 
 

 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="3">(3.0 KM)</span><br> 
 
    </div> 
 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="15">(15 KM)</span><br> 
 
    </div> 
 
    <div class="orderForm__item"> 
 
    <label>Item</label> 
 
    <input min="0" max="99" type="number" class="quantity" name="quantity" /><br> 
 
    <span class="price" value="1.7">(1.70 KM)</span><br> 
 
    </div> 
 
</form> 
 
Total: <output id="total"></output>