ユーザーが選択した数量に応じて、ショッピング カートの価格を動的に変更しようとしています。製品価格の合計を変更するコードは既に用意していますが、製品アドオンの合計を変更するのに苦労しています。誰でも私を助けることができますか?
また、アドオンの価格を変更するという事実を追加するのを忘れていましたが、ショッピング カート内のすべてのアドオンの価格が変更されています。本当の問題は、各アドオンの価格を個別に変更し、他のアドオンとは別にするにはどうすればよいかということだと思います。
ここにHTMLがあります
<table id="carttable">
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th></th>
</tr>
<tr>
<td class="cartField">12 inch sub</td>
<td class="cartField productPrice" id="price_448" data-price="5.99">$5.99</td>
<td class="cartField">
<select class="quantityDrop" name="quantity[448]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
<td class="cartField totalProdPrice" id="item_448">$20</td>
</tr>
<tr class="addon_field">
<td class="cartField addon_name">Turkey</td>
<td class="addPrice" id="addon_448" data-addon="addon_448_41" data-price="2.00">$2.00</td>
<td class="cartField totalAddPrice" data-addon-total="addon_448_41" id="totalAddOn_448">$6.00</td>
</tr>
<tr class="addon_field">
<td class="cartField addon_name">Grilled Onions via Jim</td>
<td class="addPrice" id="addon_448" data-addon="addon_448_68" data-price="0.50">$0.50</td>
<td class="cartField totalAddPrice" data-addon-total="addon_448_68" id="totalAddOn_448">$1.50</td>
</tr>
<tr>
<td class="cartField" style="width: 359px;">12 inch sub</td>
<td class="cartField productPrice" id="price_453" data-price="5.99">$5.99</td>
<td align="center" class="cartField">
<select class="quantityDrop" name="quantity[453]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="cartField totalProdPrice" id="item_453">$35.94</td>
</tr>
<tr class="addon_field">
<td class="cartField addon_name">Turkey</td>
<td class="addPrice" id="addon_453" data-addon="addon_453_41" data-price="2.00">$2.00</td>
<td class="cartField totalAddPrice" data-addon-total="addon_453_41" id="totalAddOn_453">$12.00</td>
</tr>
<tr class="addon_field">
<td class="cartField addon_name">Grilled Onions via Jim</td>
<td class="addPrice" id="addon_453" data-addon="addon_453_68" data-price="0.50">$0.50</td>
<td class="cartField totalAddPrice" data-addon-total="addon_453_68" id="totalAddOn_453">$3.00</td>
</tr>
<tr>
<td><b>Subtotal:</b></td>
<td class="subtotal">$67.89</td></tr>
<tr>
<td><b>Taxes:</b></td>
<td>$<span class="tax">4.75</span> (<span class="taxAmt">0.07000</span>)</td>
</tr>
<tr>
<td><b>Grand Total:</b></td>
<td class="grandTotal">$72.64</td>
</tr>
そしてJqueryコード
$(".quantityDrop").change(function() {
var qty = $(this).val();
var price = $(this).closest("tr")
.find("td[id^=price_]")
.html().split("$")[1];
var addOnPrice = $(this).closest("tbody")
.find("tr.addon_field")
.find("td[data-addon^=addon_]")
.html().split("$")[1];
var prodAddtotal = parseFloat(price) + parseFloat(addOnPrice);
var addOnTotal = parseInt(qty) * parseFloat(addOnPrice);
var total = parseInt(qty) * parseFloat(price);
$(this).closest("tbody").find("tr.addon_field").find("td[data-addon-total^=addon_]").html("$" + addOnTotal.toFixed(2));
$(this).closest("tr").find("td[id^=item_]").html("$" + total.toFixed(2));
var subTotal = 0;
$("td[id^=item_]").each(function() {
subTotal += parseFloat($(this).html().split("$")[1]);
});
$(".subtotal").html("$" + subTotal.toFixed(2));
var taxAmount = $('.taxAmt').html();
var tax = (subTotal * taxAmount);
$('.tax').html(tax.toFixed(2));
var subtotalTax = parseFloat(tax.toFixed(2),10);
var grandTotal = (subTotal + subtotalTax);
$('.grandTotal').html("$" + grandTotal.toFixed(2));
});
誰かが助けることができれば、それは大歓迎です。前もって感謝します。