如何使用jQuery動態基於其他輸入框更新值？

Question

我正在嘗試制作購物車。

我在這里有價格不同的產品清單。

現在，當我嘗試更改數量時，價格應根據數量以及總數而改變。

但是，當我嘗試更改數量時，我面臨的問題是使用以下代碼，價格得到更新，但其他人也得到了更新，盡管我沒有更改數量。

然后合計未顯示適當的合計

 $(".quantity").change(update); function update() { $(".quantity").each(function() { var qty = Number($(this).val()); var net = document.getElementById("net_price").value; var total = qty * net; $('.total').html("$" + total); $(".grandTotal").text(calculateSum()); }); function calculateSum() { var sum = 0; $(".total").each(function() { var value = $(this).val(); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> <td><input type="hidden" id="net_price" value="">45</td> <td class="grandTotal"></td> </tr> </table> 

有人請幫我找到靈魂

Answer 1

如果我正確理解您的信息，可能會對您有所幫助

 $('body').on('change', ".quantity", update); function update() { var qty = parseInt($(this).val()); var net = parseFloat($(this).parents('tr').find(".net_price").val()); var total = qty * net; $(this).parents('tr').find(".total_price").text("$" + total); $(".grandTotal").text('$' + calculateSum()); function calculateSum() { var sum = 0; $(".total_price").each(function() { var value = $(this).text().replace('$', ''); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td colsapn="3" class="grandTotal"></td> </tr> </table> 

性能改進通過從外部提取calculateSum來避免對調用相同的函數一次又一次地重新創建同一個函數，從而提高了上述代碼的性能

 $('body').on('change', ".quantity", update); function calculateSum() { var sum = 0; $(".total_price").each(function() { var value = $(this).text().replace('$', ''); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } function update() { var qty = parseInt($(this).val()); var net = parseFloat($(this).parents('tr').find(".net_price").val()); var total = qty * net; $(this).parents('tr').find(".total_price").text("$" + total); $(".grandTotal").text('$' + calculateSum()); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td class="qty table-default"> <td><input type="text" readonly class="net_price" value="25"></td> <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td> <td class="total_price table-default total"></td> </tr> <tr> <td colsapn="3" class="grandTotal"></td> </tr> </table> 

Answer 2

• 您正在為與$串聯的$元素設置HTML值，但是在檢索該值時，您正在使用.val()方法。 要從元素獲取text ，請改用.text方法。

• 由於value以$ .data ，因此我們無法將其用於操作，因此.data方法用於將數值存儲在特定元素的data中。

• jQuery.data('key')用於檢索值。

 $(".quantity").change(update); function update() { $(".quantity").each(function() { var qty = Number($(this).val()); var net = 10; //Static value is considered var total = qty * net; var totalElem = $('.total'); totalElem.html("$" + total); totalElem.data("value", total); $(".grandTotal").text(calculateSum()); }); function calculateSum() { var sum = 0; $(".total").each(function() { var value = $(this).data('value'); if (!isNaN(value) && value.length != 0) { sum += parseFloat(value); } }); return sum; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /> </td> <td class="total_price table-default total"></td> <td class="grandTotal"></td> </tr> </table> 

Answer 3

 $(".quantity").change(update); function update() { // Cell Variables var $qty = $(this), $row = $qty.closest('tr'), $total = $row.find('.total'); // Number Variables var qty = Number($qty.val()), price = $row.find('.price').val(), total = qty * price; // Fill Values $total.html("$" + total); $('.grandTotal').text('$' + calculateSum()); } function calculateSum() { var sum = 0; $('.total').each(function() { var strTotal = $(this).text(); var total = parseFloat(strTotal.replace(/^\\D+/g, '')); if (!isNaN(total)) sum += total; }); return sum; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Quantity</th> <th>Price</th> <th>Total</th> <th>Grand Total</th> </tr> </thead> <tbody> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /> </td> <td><input type="hidden" class="price" value="45" />$45</td> <td class="total_price table-default total"></td> <td class="grandTotal"></td> </tr> <tr> <td class="qty table-default"> <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /> </td> <td><input type="hidden" class="price" value="10" />$10</td> <td class="total_price table-default total"></td> <td class="grandTotal"></td> </tr> </tbody> </table>