Hinzufügen von Klonelementwerten mit Mengen

Question

Ich erstelle einen Angebotsgenerator, und ich habe ein Produktfeld, das geklont werden kann.

Jede Option im Select-Tag hat einen Wert, aber neben dem Produkt befindet sich eine Menge, so dass der Benutzer ein Produkt und die gewünschte Anzahl auswählen kann.

Das Feld ist auch klonfähig, so dass der Benutzer mehrere Produkte mit jeweils eigenen Mengen haben kann.

Ich muss die Menge für jede Zeile nehmen, multiplizieren Sie sie mit dem Wert der Option und fügen Sie alle Zeilen zusammen, um eine Summe zu geben.

Dies ist, was ich

HTML

<select class="form-control onChangePrice add product" name="Product"> 
     <option value="">Select...</option> 
     <option value="3300">Product 1</option> 
     <option value="4500">Product 2</option> 
     <option value="6000">Product 3</option> 
     <option value="8000">Product 4</option> 
</select> 
<div class="col-lg-3 col-md-3 col-sm-3"> 
    <input class="form-control onChangePrice productQuantity" type="number" name="ProductQuantity" value="1"> 
</div> 

Javascript

$(".onChangePrice").change(function(){ 
    var productTotal = 0; 
    $('.product').each(function(){ 
     if (this.value != "") { 
     productEachTotal = this.value * $(".productQuantity").value; 
     productTotal += parseFloat(productEachTotal); 
     }; 
    }); 
    console.log(productTotal); 
    }); 

Aber es ist einfach Rückkehr NaN so weit haben.

Jede Hilfe wäre willkommen!

Dank

Answer 1

Sie benötigen() verwenden .val den Wert zu erhalten.

$(".onChangePrice").change(function(){ 
    var productTotal = 0; 
    $('.product').each(function(){ 
     if (this.value != "") { 
     productEachTotal = this.value * parseInt($(".productQuantity").val()); 
     productTotal += parseFloat(productEachTotal); 
     }; 
    }); 
    console.log(productTotal); 
    }); 

Answer 2

Versuchen Sie dieses:.

function calculateRowTotals(rowSelector, productSelector, quanitySelector) { 
 
    let rows = [].slice.call(document.querySelectorAll(rowSelector)); 
 
    return rows.map(function(rowElement) { 
 
    var product = rowElement.querySelector(productSelector); 
 
    var quantity = rowElement.querySelector(quanitySelector); 
 
    if(!quantity || !product) return 0; 
 
    return parseFloat(product.value || 0) * Math.abs(parseFloat(quantity.value || 0)); 
 
    }); 
 
} 
 

 
function calculateTotal(rowSelector, productSelector, quanitySelector) { 
 
    return calculateRowTotals(rowSelector, productSelector, quanitySelector).reduce(function(total, rowTotal) { 
 
    return total + rowTotal; 
 
    }, 0); 
 
} 
 

 

 

 
// demo code 
 

 
[].slice.call(document.querySelectorAll('.onChangePrice')).forEach(function(element) { 
 
    element.addEventListener('change', function(e) { 
 
    console.log('rows total: ', calculateRowTotals('.row', '.product', '.productQuantity')); 
 
    console.log('total: ', calculateTotal('.row', '.product', '.productQuantity')); 
 
    }); 
 
}); 
 

 
console.log(calculateTotal('.row', '.product', '.productQuanity'));

<div class="row"> 
 
    <select class="form-control onChangePrice add product" name="Product"> 
 
     <option value="">Select...</option> 
 
     <option value="3300">Product 1</option> 
 
     <option value="4500">Product 2</option> 
 
     <option value="6000">Product 3</option> 
 
     <option value="8000">Product 4</option> 
 
    </select> 
 
    <div class="col-lg-3 col-md-3 col-sm-3"> 
 
     <input class="form-control onChangePrice productQuantity" type="number" name="ProductQuantity" value="1"> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <select class="form-control onChangePrice add product" name="Product"> 
 
     <option value="">Select...</option> 
 
     <option value="3300">Product 1</option> 
 
     <option value="4500">Product 2</option> 
 
     <option value="6000">Product 3</option> 
 
     <option value="8000">Product 4</option> 
 
    </select> 
 
    <div class="col-lg-3 col-md-3 col-sm-3"> 
 
     <input class="form-control onChangePrice productQuantity" type="number" name="ProductQuantity" value="1"> 
 
    </div> 
 
</div>