Jquery購物車數量更新按鈕？

Question

籃子在這些代碼中自動更新。 當產品數量發生變化時，籃子會自動更新。 但是，我希望在單擊按鈕時更新它。 我試過jquery“點擊”但失敗了。 運行代碼如下。

怎么做？

 /* Set rates + misc */ var taxRate = 0.05; var shippingRate = 15.00; var fadeTime = 300; /* Assign actions */ $('.product-quantity input').change( function() { updateQuantity(this); }); $('.product-removal button').click( function() { removeItem(this); }); /* Recalculate cart */ function recalculateCart() { var subtotal = 0; /* Sum up row totals */ $('.product').each(function () { subtotal += parseFloat($(this).children('.product-line-price').text()); }); /* Calculate totals */ var tax = subtotal * taxRate; var shipping = (subtotal > 0 ? shippingRate : 0); var total = subtotal + tax + shipping; /* Update totals display */ $('.totals-value').fadeOut(fadeTime, function() { $('#cart-subtotal').html(subtotal.toFixed(2)); $('#cart-tax').html(tax.toFixed(2)); $('#cart-shipping').html(shipping.toFixed(2)); $('#cart-total').html(total.toFixed(2)); if(total == 0){ $('.checkout').fadeOut(fadeTime); }else{ $('.checkout').fadeIn(fadeTime); } $('.totals-value').fadeIn(fadeTime); }); } /* Update quantity */ function updateQuantity(quantityInput) { /* Calculate line price */ var productRow = $(quantityInput).parent().parent(); var price = parseFloat(productRow.children('.product-price').text()); var quantity = $(quantityInput).val(); var linePrice = price * quantity; /* Update line price display and recalc cart totals */ productRow.children('.product-line-price').each(function () { $(this).fadeOut(fadeTime, function() { $(this).text(linePrice.toFixed(2)); recalculateCart(); $(this).fadeIn(fadeTime); }); }); } /* Remove item from cart */ function removeItem(removeButton) { /* Remove row from DOM and recalc cart total */ var productRow = $(removeButton).parent().parent(); productRow.slideUp(fadeTime, function() { productRow.remove(); recalculateCart(); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Shopping Cart</h1> <div class="shopping-cart"> <div class="column-labels"> <label class="product-image">Image</label> <label class="product-details">Product</label> <label class="product-price">Price</label> <label class="product-quantity">Quantity</label> <label class="product-removal">Remove</label> <label class="product-line-price">Total</label> </div> <div class="product"> <div class="product-image"> </div> <div class="product-details"> <div class="product-title">Dingo Dog Bones</div> <p class="product-description">The best dog bones of all time. Holy crap. Your dog will be begging for these things! I got curious once and ate one myself. I'm a fan.</p> </div> <div class="product-price">12.99</div> <div class="product-quantity"> <input type="number" value="2" min="1"> </div> <div class="product-removal"> <button class="remove-product"> Remove </button> <button class="update-quantity-product"> Update </button> </div> <div class="product-line-price">25.98</div> </div> <div class="totals"> <div class="totals-item"> <label>Subtotal</label> <div class="totals-value" id="cart-subtotal">71.97</div> </div> <div class="totals-item"> <label>Tax (5%)</label> <div class="totals-value" id="cart-tax">3.60</div> </div> <div class="totals-item"> <label>Shipping</label> <div class="totals-value" id="cart-shipping">15.00</div> </div> <div class="totals-item totals-item-total"> <label>Grand Total</label> <div class="totals-value" id="cart-total">90.57</div> </div> </div> <button class="checkout">Checkout</button> </div>

籃子在這些代碼中自動更新。 當產品數量發生變化時，籃子會自動更新。 但是，我希望在單擊按鈕時更新它。 我試過jquery“點擊”但失敗了。 運行代碼如下。

怎么做？

Answer 1

使用下面的代碼，您使用了許多同名的類，因此它正在刪除項目，請參閱我的答案。

 /* Set rates + misc */ var taxRate = 0.05; var shippingRate = 15.00; var fadeTime = 300; /* Assign actions */ //$('.product-quantity input').change( function() { //updateQuantity(this); //}); $(document).on('click', '.update-quantity-product', function(e){ var vals = $('input').val(); // alert(vals); updateQuantity(vals, $('input')); }) $('.remove-product-btn').click( function() { removeItem(this); }); /* Recalculate cart */ function recalculateCart() { var subtotal = 0; /* Sum up row totals */ $('.product').each(function () { subtotal += parseFloat($(this).children('.product-line-price').text()); }); /* Calculate totals */ var tax = subtotal * taxRate; var shipping = (subtotal > 0 ? shippingRate : 0); var total = subtotal + tax + shipping; /* Update totals display */ $('.totals-value').fadeOut(fadeTime, function() { $('#cart-subtotal').html(subtotal.toFixed(2)); $('#cart-tax').html(tax.toFixed(2)); $('#cart-shipping').html(shipping.toFixed(2)); $('#cart-total').html(total.toFixed(2)); if(total == 0){ $('.checkout').fadeOut(fadeTime); }else{ $('.checkout').fadeIn(fadeTime); } $('.totals-value').fadeIn(fadeTime); }); } /* Update quantity */ function updateQuantity(qty, quantityInput) { /* Calculate line price */ var productRow = $(quantityInput).parent().parent(); var price = parseFloat(productRow.children('.product-price').text()); var quantity = $(quantityInput).val(); var linePrice = price * quantity; /* Update line price display and recalc cart totals */ productRow.children('.product-line-price').each(function () { $(this).fadeOut(fadeTime, function() { $(this).text(linePrice.toFixed(2)); recalculateCart(); $(this).fadeIn(fadeTime); }); }); } /* Remove item from cart */ function removeItem(removeButton) { /* Remove row from DOM and recalc cart total */ var productRow = $(removeButton).parent().parent(); productRow.slideUp(fadeTime, function() { productRow.remove(); recalculateCart(); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Shopping Cart</h1> <div class="shopping-cart"> <div class="column-labels"> <label class="product-image">Image</label> <label class="product-details">Product</label> <label class="product-price">Price</label> <label class="product-quantity">Quantity</label> <label class="product-removal">Remove</label> <label class="product-line-price">Total</label> </div> <div class="product"> <div class="product-image"> </div> <div class="product-details"> <div class="product-title">Dingo Dog Bones</div> <p class="product-description">The best dog bones of all time. Holy crap. Your dog will be begging for these things! I got curious once and ate one myself. I'm a fan.</p> </div> <div class="product-price">12.99</div> <div class="product-quantity"> <input type="number" value="2" min="1"> </div> <div class="product-removal"> <button class="remove-product-btn"> Remove </button> <button class="update-quantity-product" type="button"> Update </button> </div> <div class="product-line-price">25.98</div> </div> <div class="totals"> <div class="totals-item"> <label>Subtotal</label> <div class="totals-value" id="cart-subtotal">71.97</div> </div> <div class="totals-item"> <label>Tax (5%)</label> <div class="totals-value" id="cart-tax">3.60</div> </div> <div class="totals-item"> <label>Shipping</label> <div class="totals-value" id="cart-shipping">15.00</div> </div> <div class="totals-item totals-item-total"> <label>Grand Total</label> <div class="totals-value" id="cart-total">90.57</div> </div> </div> <button class="checkout">Checkout</button> </div>

Answer 2

 /* Set rates + misc */ var taxRate = 0.18; var fadeTime = 300; /* Assign actions */ //$('.product-quantity input').change( function() { //updateQuantity(this); //}); $(document).on('click', '.update-quantity-product', function(e){ var vals = $('.product-quantity input').val(); // alert(vals); updateQuantity(vals, $('.product-quantity input')); }) $('.cpa-delete').click( function() { removeItem(this); }); /* Recalculate cart */ function recalculateCart() { var subtotal = 0; /* Sum up row totals */ $('.cpa-product').each(function () { subtotal += parseFloat($(this).children('.product-line-price').text()); }); /* Calculate totals */ var tax = subtotal * taxRate; var total = subtotal + tax; /* Update totals display */ $('.totals-value').fadeOut(fadeTime, function() { $('#cart-subtotal').html(subtotal.toFixed(2)); $('#cart-tax').html(tax.toFixed(2)); $('#cart-total-tax').html(total.toFixed(2)); $('#cart-total').html(total.toFixed(2)); if(total == 0){ $('.checkout').fadeOut(fadeTime); }else{ $('.checkout').fadeIn(fadeTime); } $('.totals-value').fadeIn(fadeTime); }); } /* Update quantity */ function updateQuantity(qty, quantityInput) { /* Calculate line price */ var productRow = $(quantityInput).parent().parent(); var price = parseFloat(productRow.children('.product-price').text()); var quantity = $(quantityInput).val(); var linePrice = price * quantity; /* Update line price display and recalc cart totals */ productRow.children('.product-line-price').each(function () { $(this).fadeOut(fadeTime, function() { $(this).text(linePrice.toFixed(2)); recalculateCart(); $(this).fadeIn(fadeTime); }); }); } /* Remove item from cart */ function removeItem(removeButton) { /* Remove row from DOM and recalc cart total */ var productRow = $(removeButton).parent().parent(); productRow.slideUp(fadeTime, function() { productRow.remove(); recalculateCart(); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cpa-col row no-gutters align-items-center mt-3 pt-3 cpa-product"> <div class="col-xl-1 pr-xl-2"> <a href=""><img src="images/img8.png" class="img-fix d-block cpa-img" alt="" /></a> </div> <div class="col-xl-5 mt-2 mt-xl-0 text-center text-xl-left pl-xl-2"> <a class="cpa-name" href="">Lorem ipsum dolor sit amet</a> </div> <div class="col-xl-2 mt-2 mt-xl-0 product-quantity number row no-gutters"> <span class="minus">-</span> <input type="text" value="1"/> <span class="plus">+</span> <button class="update-quantity-product">Güncelle</button> </div> <div class="col-xl-2 text-center product-price money"> 255.98 </div> <div class="col-xl-1 text-center product-line-price money"> 255.98 </div> <div class="col-xl-1 mt-2 mt-xl-0 text-center text-xl-right"> <div class="cpa-delete">Sil</div> </div> </div> <div class="cpa-col row no-gutters align-items-center mt-3 pt-3 cpa-product"> <div class="col-xl-1 pr-xl-2"> <a href=""><img src="images/img8.png" class="img-fix d-block cpa-img" alt="" /></a> </div> <div class="col-xl-5 mt-2 mt-xl-0 text-center text-xl-left pl-xl-2"> <a class="cpa-name" href="">Lorem ipsum dolor sit amet</a> </div> <div class="col-xl-2 mt-2 mt-xl-0 product-quantity number row no-gutters"> <span class="minus">-</span> <input type="text" value="1"/> <span class="plus">+</span> <button class="update-quantity-product">Güncelle</button> </div> <div class="col-xl-2 text-center product-price money"> 255.98 </div> <div class="col-xl-1 text-center product-line-price money"> 255.98 </div> <div class="col-xl-1 mt-2 mt-xl-0 text-center text-xl-right"> <div class="cpa-delete">Sil</div> </div> </div> <div class="cpr-content totals"> <div class="cpr-col mt-3"> <div class="row align-items-center"> <div class="col-6">Ara Toplam</div> <div class="col-6 text-right totals-value money" id="cart-subtotal">255.98</div> </div> </div> <div class="cpr-col mt-3"> <div class="row align-items-center"> <div class="col-6">KDV %18</div> <div class="col-6 text-right totals-value money" id="cart-tax">12.75</div> </div> </div> <div class="cpr-col mt-3"> <div class="row align-items-center"> <div class="col-6">KDV Dahil</div> <div class="col-6 text-right totals-value money" id="cart-total-tax">268.73</div> </div> </div> <div class="cpr-col mt-3"> <div class="cpr-last pt-3"> <div class="row align-items-center"> <div class="col-6">Toplam</div> <div class="col-6 text-right totals-value money" id="cart-total">268.73</div> </div> </div> </div> </div>