jQuery - 複数のドロップダウンからのカウント価格

Question

私は問題がありますが、それを理解する方法はまだ分かりません。 私は、左側に、それぞれの数量の隣に価格でいくつかのドロップダウンを持っています。 たとえば、左のドロップダウンは写真のサイズ、右は数量のようです。

私はドロップダウンの各ペアを数え、合計価格を数える方法を理解できません。最後のペアだけが合計価格を作成します。ここで

function countPrice(){ 
    var total_price = 0.00; 
    var data_price = ""; 
    var data_count = ""; 

    $(".tp-sel > option:selected").each(function(){ 
    data_price = parseFloat($(this).data("price")) || 0; 
    }); 

    $(".tp-sel-count > option:selected").each(function(){ 
     data_count = parseFloat($(this).data("count")) || 0; 
    }); 

    total_price = data_price * data_count; 
    $("#price").html(total_price.toFixed(2)); 
    console.log("Price: " + data_price + "Count:" +data_count); 
} 

はフィドルです：JSFiddle

ありがとうございました！

Answer 1

selectsが含まれているdivsを繰り返して、各価格を処理してペアとしてカウントできるようにすることをおすすめします。私は、反復を容易にするために、これらのコンテナdiv秒にクラスを追加しました：

あなたは各ペアを処理する必要が

function countPrice(){ 
 
    var total_price = 0.00; 
 
    var data_price = ""; 
 
    var data_count = ""; 
 

 
    $(".product").each(function(){ 
 
    data_price = parseFloat($(this).find(".tp-sel > option:selected").data("price")) || 0; 
 
    data_count = parseFloat($(this).find(".tp-sel-count > option:selected").data("count")) || 0; 
 
    console.log("Price: " + data_price + "Count:" +data_count); 
 
    total_price += data_price * data_count; 
 
    }) 
 
    $("#price").html(total_price.toFixed(2)); 
 
} 
 

 

 
$("#countprice").click(function(){ 
 
    countPrice(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="width: 30%; display:block;" class="product"> 
 
    <select class="tp-sel"> 
 
    <option data-price="0.10">0.10</option> 
 
    <option data-price="0.30">0.30</option> 
 
    <option data-price="0.40">0.40</option> 
 
    </select> 
 
    <select class="tp-sel-count"> 
 
    <option data-count="1">1</option> 
 
    <option data-count="2">2</option> 
 
    <option data-count="3">3</option> 
 
    <option data-count="4">4</option>  
 
    </select> 
 
</div> 
 
<div style="width: 30%; display:block;" class="product"> 
 
    <select class="tp-sel"> 
 
    <option data-price="0.10">0.10</option> 
 
    <option data-price="0.30">0.30</option> 
 
    <option data-price="0.40">0.40</option> 
 
    </select> 
 
    <select class="tp-sel-count"> 
 
    <option data-count="1">1</option> 
 
    <option data-count="2">2</option> 
 
    <option data-count="3">3</option> 
 
    <option data-count="4">4</option>  
 
    </select> 
 
</div> 
 

 
<div style="width: 30%; display:block;" class="product"> 
 
    <select class="tp-sel"> 
 
    <option data-price="0.10">0.10</option> 
 
    <option data-price="0.30">0.30</option> 
 
    <option data-price="0.40">0.40</option> 
 
    </select> 
 
    <select class="tp-sel-count"> 
 
    <option data-count="1">1</option> 
 
    <option data-count="2">2</option> 
 
    <option data-count="3">3</option> 
 
    <option data-count="4">4</option>  
 
    </select> 
 
</div> 
 
<div> 
 
<span id="price">0.00</span> 
 
<button id="countprice"> 
 
Count 
 
</button> 
 
</div>

Answer 2

、その後、合計で何をしますか？ 私の例では、私は単純にすべての総価格をまとめて...それが動作するかどうかを判断するまでです。その最後を行うには

$(document).on('change', '.tp-sel', function() { 
    var index = $(this).index('.tp-sel'); 
    console.log(index); 
    var oSel = $(this).find('option:selected'); 
    var pair_price = oSel.length ? parseFloat(oSel.data("price")) : 0; 
    var oQty = $(this).next(".tp-sel-count").find('option:selected'); 
    var pair_count = oQty.length ? parseFloat(oQty.data("count")) : 0; 
    var totalPair_price = pair_price * pair_count; // of this pair 
    console.log("Price: " + pair_price + "Count:" + pair_count, totalPair_price); 
    $("#price").html(totalPair_price.toFixed(2)); 
}); 

：あなたは、個々のペアの変更でこれを実行したい場合は

function countPrice() { 
    var total_price = 0.00; 
    var data_price = ""; 
    var data_count = ""; 
    $(".tp-sel").each(function() { 
    var oSel = $(this).find('option:selected'); 
    var pair_price = oSel.length ? parseFloat(oSel.data("price")) : 0; 
    var oQty = $(this).next(".tp-sel-count").find('option:selected'); 
    var pair_count = oQty.length ? parseFloat(oQty.data("count")) : 0; 
    var totalPair_price = pair_price * pair_count; // of this pair 
    console.log("Price: " + pair_price + "Count:" + pair_count,totalPair_price); 
    total_price += totalPair_price; 
    }); 
    $("#price").html(total_price.toFixed(2)); 
} 

今、あなたはこのような何かを行うことができます - （合計これは本当に価格は全てカウントされます）いずれかのプルダウンの変更時：

$(document).on('change', '.tp-sel', function() { 
    var index = $(this).index('.tp-sel'); 
    console.log(index); 
    calcThis(index); 
}); 
$(document).on('change', '.tp-sel-count', function() { 
    var index = $(this).index('.tp-sel-count'); 
    console.log(index); 
    calcThis(index); 
}); 

function calcThis(index) { 
    var sel = $('.tp-sel').eq(index); 
    console.log(index); 
    var oSel = sel.find('option:selected'); 
    var pair_price = oSel.length ? parseFloat(oSel.data("price")) : 0; 
    var oQty = sel.next(".tp-sel-count").find('option:selected'); 
    var pair_count = oQty.length ? parseFloat(oQty.data("count")) : 0; 
    var totalPair_price = pair_price * pair_count; // of this pair 
    console.log("Price: " + pair_price + "Count:" + pair_count, totalPair_price); 
    $("#price").html(totalPair_price.toFixed(2)); 
}