电商网站购物车递减功能异常：点击减号价格递增的解决方法

问题根源 #

当前代码存在两个核心问题导致总价异常：

• changeQuantity函数仅修改页面上商品的数量显示，未关联购物车的更新逻辑。如果你的预期是点击“-”按钮直接调整购物车中对应商品的数量和总价，这个函数完全没处理这部分逻辑。
• addToCart函数对已有商品采用累加数量和总价的逻辑，若你修改商品数量后再次点击“加入购物车”，即使数量减少了，新的数量仍会被加到购物车已有数量上，导致总价持续递增。

解决方案 #

根据你的实际需求选择对应修复方式：

方案1：点击“-”/“+”直接同步更新购物车

修改changeQuantity函数，让它能找到购物车中的对应商品，同步调整数量、单项总价及全局总价：

var cartTotal = 0;

function addToCart(button, price) {
    var quantity = parseInt(button.parentElement.querySelector("span").textContent);
    var totalForProduct = quantity * price;
    var productName = button.parentElement.parentElement.querySelector("h3").textContent;
    var cartList = document.getElementById('cartList');

    var existingCartItem = cartList.querySelector('[data-product-name="' + productName + '"]');
    if (existingCartItem) {
        const oldTotal = parseInt(existingCartItem.querySelector('.cart-item-total').textContent);
        cartTotal = cartTotal - oldTotal + totalForProduct;
        existingCartItem.querySelector('.cart-item-quantity').textContent = quantity;
        existingCartItem.querySelector('.cart-item-total').textContent = totalForProduct;
    } else {
        cartTotal += totalForProduct;
        var cartItem = document.createElement('li');
        cartItem.classList.add('cart-item');
        cartItem.setAttribute('data-product-name', productName);
        cartItem.innerHTML =
            productName + ' (' + price + ' lei) x <span class="cart-item-quantity">' + quantity + '</span> = <span class="cart-item-total">' + totalForProduct + '</span> lei' +
            '<button onclick="removeFromCart(this)">Șterge</button>';
        cartList.appendChild(cartItem);
    }

    document.getElementById('total').textContent = cartTotal;
}

function removeFromCart(button) {
    var cartItem = button.parentElement;
    var totalForProduct = parseInt(cartItem.querySelector('.cart-item-total').textContent);
    cartTotal -= totalForProduct;
    document.getElementById('total').textContent = cartTotal;
    cartItem.remove();
}

function changeQuantity(button, change, price) {
    const quantityElement = button.parentElement.querySelector("span");
    let quantity = parseInt(quantityElement.textContent);
    const productName = button.parentElement.parentElement.querySelector("h3").textContent;
    const cartList = document.getElementById('cartList');
    const existingCartItem = cartList.querySelector('[data-product-name="' + productName + '"]');

    // 限制数量至少为1，避免无效的0数量
    if (change === -1 && quantity > 1) {
        quantity -= 1;
        quantityElement.textContent = quantity;
        
        // 购物车有该商品时同步更新
        if (existingCartItem) {
            const oldTotal = parseInt(existingCartItem.querySelector('.cart-item-total').textContent);
            const newTotal = oldTotal - price;
            cartTotal -= price;
            
            existingCartItem.querySelector('.cart-item-quantity').textContent = quantity;
            existingCartItem.querySelector('.cart-item-total').textContent = newTotal;
            document.getElementById('total').textContent = cartTotal;
        }
    } else if (change === 1) {
        quantity += 1;
        quantityElement.textContent = quantity;
        
        // 购物车有该商品时同步更新
        if (existingCartItem) {
            const oldTotal = parseInt(existingCartItem.querySelector('.cart-item-total').textContent);
            const newTotal = oldTotal + price;
            cartTotal += price;
            
            existingCartItem.querySelector('.cart-item-quantity').textContent = quantity;
            existingCartItem.querySelector('.cart-item-total').textContent = newTotal;
            document.getElementById('total').textContent = cartTotal;
        }
    }
}

function clearCart() {
    var cartList = document.getElementById('cartList');
    cartList.innerHTML = '';
    cartTotal = 0;
    document.getElementById('total').textContent = cartTotal;
}

注意：调用changeQuantity时需要传入商品价格，例如按钮的onclick属性应写为changeQuantity(this, -1, 99)（99为商品单价）。

方案2：修改数量后点击“加入购物车”替换原有商品数量

仅修改addToCart函数中已有商品的处理逻辑，将累加改为替换：

function addToCart(button, price) {
    var quantity = parseInt(button.parentElement.querySelector("span").textContent);
    var totalForProduct = quantity * price;
    var productName = button.parentElement.parentElement.querySelector("h3").textContent;
    var cartList = document.getElementById('cartList');

    var existingCartItem = cartList.querySelector('[data-product-name="' + productName + '"]');
    if (existingCartItem) {
        // 替换原有数量和总价，更新全局总价
        const oldTotal = parseInt(existingCartItem.querySelector('.cart-item-total').textContent);
        cartTotal = cartTotal - oldTotal + totalForProduct;
        
        existingCartItem.querySelector('.cart-item-quantity').textContent = quantity;
        existingCartItem.querySelector('.cart-item-total').textContent = totalForProduct;
    } else {
        cartTotal += totalForProduct;
        var cartItem = document.createElement('li');
        cartItem.classList.add('cart-item');
        cartItem.setAttribute('data-product-name', productName);
        cartItem.innerHTML =
            productName + ' (' + price + ' lei) x <span class="cart-item-quantity">' + quantity + '</span> = <span class="cart-item-total">' + totalForProduct + '</span> lei' +
            '<button onclick="removeFromCart(this)">Șterge</button>';
        cartList.appendChild(cartItem);
    }

    document.getElementById('total').textContent = cartTotal;
}

这样修改后，当你调整商品数量后再次点击“加入购物车”，会直接替换购物车中该商品的数量和总价，不会出现累加导致的总价递增问题。

内容的提问来源于stack exchange，提问作者Uliana Ciobanu