本文详解如何修复购物车中“-”按钮点击后价格反向增加的问题，核心在于分离数量变更逻辑与总价计算逻辑，确保每次数量变化都实时更新对应商品小计及购物车总金额。

本文详解如何修复购物车中“-”按钮点击后价格反向增加的问题，核心在于分离数量变更逻辑与总价计算逻辑，确保每次数量变化都实时更新对应商品小计及购物车总金额。

在当前代码中，changeQuantity() 函数仅修改了页面上显示的数量（ 文本），但未同步更新购物车中该商品的小计金额（.cart-item-total）和全局 cartTotal。更严重的是，addToCart() 被设计为「仅添加」逻辑，而 removeFromCart() 是整项删除——二者均未支持「单商品数量动态调整」这一关键场景。因此，当用户点击“−”减少数量时，界面数量虽变，但购物车里的金额仍基于旧值累加，导致总价异常增长。

要真正实现安全、可逆、实时同步的数量与价格联动，需重构逻辑：将「数量变更」与「金额重算」解耦，并统一由一个中心函数管理。以下是优化后的完整实现：

✅ 正确做法：引入 updateCartItem() 与 recalculateCart()

let cartTotal = 0;

// 主要更新函数：根据当前商品数量重新计算小计并刷新购物车
function updateCartItem(productName, newQuantity, unitPrice) {
    const cartList = document.getElementById('cartList');
    const cartItem = cartList.querySelector(`[data-product-name="${productName}"]`);

    if (!cartItem) return;

    // 防止负数或清零后残留
    if (newQuantity  {
        const subtotal = parseInt(item.querySelector('.cart-item-total').textContent) || 0;
        cartTotal += subtotal;
    });

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

// 改进后的 changeQuantity：传入单价，驱动 updateCartItem
function changeQuantity(button, change) {
    const priceEl = button.parentElement.parentElement.querySelector('.price'); // 假设单价藏在 .price 元素中
    const unitPrice = parseFloat(priceEl?.textContent || '0') || 0;

    const quantityEl = button.parentElement.querySelector("span");
    let quantity = parseInt(quantityEl.textContent) || 0;

    quantity = Math.max(0, quantity + change); // 确保不小于 0
    quantityEl.textContent = quantity;

    const productName = button.parentElement.parentElement.querySelector("h3").textContent;
    updateCartItem(productName, quantity, unitPrice);
}

// addToCart 保持简洁：只负责首次添加（含防重复）
function addToCart(button, price) {
    const quantity = parseInt(button.parentElement.querySelector("span").textContent) || 1;
    const productName = button.parentElement.parentElement.querySelector("h3").textContent;
    const cartList = document.getElementById('cartList');

    const existingCartItem = cartList.querySelector(`[data-product-name="${productName}"]`);
    if (existingCartItem) {
        const existingQty = parseInt(existingCartItem.querySelector('.cart-item-quantity').textContent) || 0;
        updateCartItem(productName, existingQty + quantity, price);
    } else {
        const cartItem = document.createElement('li');
        cartItem.classList.add('cart-item');
        cartItem.setAttribute('data-product-name', productName);
        cartItem.innerHTML = `
            ${productName} (${price} lei) × <span class="cart-item-quantity">${quantity}</span> 
            = <span class="cart-item-total">${quantity * price}</span> lei
            <button onclick="removeFromCart(this)">Șterge</button>
        `;
        cartList.appendChild(cartItem);
    }
    recalculateCart(); // 添加后立即重算，不依赖 cartTotal 累加
}

function removeFromCart(button) {
    button.parentElement.remove();
    recalculateCart();
}

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

⚠️ 关键注意事项

• 不要依赖 cartTotal += ... 累加：浮点误差、并发操作、删除/修改等场景极易导致状态错乱。✅ 推荐使用 recalculateCart() 每次从 DOM 实时汇总。
• HTML 结构需配合：确保每个商品区域包含可读取的单价元素（如 29.99），否则 changeQuantity() 无法获取 unitPrice。
• 边界防护必须到位：Math.max(0, ...) 防止数量为负；updateCartItem(..., 0, ...) 自动移除空项。
• 事件绑定建议升级：避免内联 onclick，改用 addEventListener 更利于调试与解耦。

通过以上重构，点击 “+” 或 “−” 按钮时，不仅数量实时更新，对应商品小计与购物车总金额也严格同步，彻底解决“越减越贵”的逻辑陷阱。