jquery - 使用 Jquery 的购物车问题

问题描述

我正在设计一个购物车。在此购物车中，第一个产品的功能运行良好，但我在第二个产品中遇到了问题。有人可以建议/帮助我吗？请查看下面提到的小提琴链接。此外，此购物车适用于单个产品，但适用于多个产品，则无法正常工作。

这是HTML

<div class="container">
     <div class="row">
        <div class="col-sm-12">
           <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">Test Product</div>
                    <p class="product-description">Lorem ipsum dolor...</p>
                 </div>
                 <div class="product-price">100</div>
                 <div class="product-quantity">
                    <div class="button-container">
                       <button class="cart-qty-plus" type="button" value="+">+</button>
                       <button class="cart-qty-minus" type="button" value="-">-</button>
                       <input type="number" value="1" min="1" class="qty" disabled>
                    </div>
                 </div>
                 <div class="product-removal">
                    <button class="remove-product">
                    Remove
                    </button>
                 </div>
                 <div class="product-line-price">100</div>
              </div>
              <div class="product">
                 <div class="product-image">
                 </div>
                 <div class="product-details">
                    <div class="product-title">Test product2</div>
                    <p class="product-description">Lorem ipsum dolor</p>
                 </div>
                 <div class="product-price">100</div>
                 <div class="product-quantity">
                    <div class="button-container">
                       <button class="cart-qty-plus" type="button" value="+">+</button>
                       <button class="cart-qty-minus" type="button" value="-">-</button>
                       <input type="number" value="1" min="1" class="qty" disabled>
                    </div>
                 </div>
                 <div class="product-removal">
                    <button class="remove-product">
                    Remove
                    </button>
                 </div>
                 <div class="product-line-price">100</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>
        </div>
     </div>
  </div>

这是脚本

var taxRate = 0.05;
var shippingRate = 15.00;
var fadeTime = 300;



$(document).ready(function() {
    recalculateCart();
});


//On click Plus button

$(document).ready(function() {
    $(".cart-qty-plus").click(function() {
        var $n = $(this)
            .parent(".button-container")
            .parent(".product-quantity")
            .find(".qty");

        $n.val(Number($n.val()) + 1);

        updateQuantity(this);

    });
});


// On click minus button


$(document).ready(function() {
    $(".cart-qty-minus").click(function() {
        var $n = $(this)
            .parent(".button-container")
            .parent(".product-quantity")
            .find(".qty");

        var amount = Number($n.val());
        if (amount > 1) {
            $n.val(amount - 1);

            updateQuantity(this);

        }
    });
});



// If the removed button is clicked


$('.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 < 300 ? 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().parent();
    var price = parseFloat(productRow.children('.product-price').text());



    var quantity = $(".qty").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();
    });
}

这是Jsfiddle链接

标签： jquerycart

jquery - 使用 Jquery 的购物车问题

问题描述

解决方案

推荐阅读