2017-03-03 5 views
0

私は見積もりジェネレータを作成しています。私はクローン可能なプロダクトフィールドを持っています。クローン要素の値を数量で追加する

selectタグの各オプションには値がありますが、商品の横に数量があるため、ユーザーは商品とその数を選択できます。

フィールドもクローン可能であるため、ユーザはそれぞれ独自の数量を持つ複数の製品を持つことができます。

各行の数量を取得し、オプションの値で掛け合わせ、すべての行を合計して合計する必要があります。

これは私がこれまで

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); 
    }); 

しかし、そのだけではNaNを返す持っているものです。

助けていただけたら幸いです!

ありがとうございます。

+1

'$( "productQuantity。 ")[0] .value'または' $(" productQuantity。")のval()。 '多分? – smarber

答えて

0

値を取得するには、.val()を使用する必要があります。

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

これはまだNaNフラストレーションを返すだけです –

+0

ここで動作しますhttps://jsfiddle.net/srq27s52/ –

0

この方法を試してください。

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>

+0

これはクローンされた要素で動作しますか?私の製品を50回以上クローンしたら、私はクローンした量で働き続けますか? –

+0

行を「はい」にクローン化すると、1つの製品と1つの行につき1つのquanityに対してのみ機能します。しかし、1行n行のn個の製品で簡単に動作させることができます。 – cyrix

関連する問題