购物车删除按钮问题：删除商品后#zakaz-pusto无法显示

核心问题分析 #

1. 元素显示状态未重置：点击购买时执行了$('#zakaz-pusto').hide()，之后即使购物车清空，该元素仍处于隐藏状态，仅通过append无法让它显示。
2. 删除逻辑有误：当前用cart.length = 0会直接清空整个购物车，而非删除指定商品，不符合常规购物车逻辑。
3. 购物车容器与空状态元素的显示逻辑脱节：未统一控制#cart-object和#zakaz-pusto的显示切换。

修复后的完整代码 #

$(document).ready(function CartLogic() {
    // 把const改为let，因为后续需要修改数组内容
    let cart = [];

    const itemx7 = {
        name: 'item1',
        price: 10190,
        quantity: 1,
    };

    $('.button-buy').click(function BuyItem() {
        const existingItem = cart.find(item => item.name === itemx7.name);

        if (existingItem) {
            existingItem.quantity++;
        } else {
            cart.push({...itemx7, quantity: 1});
        }

        updateCartDisplay();
    });

    function updateCartDisplay() {
        const cartContainer = $('#zakaz-menu');
        cartContainer.empty();

        cart.forEach(item => {
            const itemHTML = `<div class="cart-item">
                            <span class="item-name">${item.name}</span>
                            <button class="quantity-button increase" data-action="increase" data-name="${item.name}">+</button>
                            <span class="item-quantity">${item.quantity}</span>
                            <button class="quantity-button decrease" data-action="decrease" data-name="${item.name}">-</button>
                            <span class="item-price">${item.price * item.quantity} ₽</span>
                            <button class="quantity-button item-delete" data-action="item-delete" data-name="${item.name}">✕</button>
                          </div>`;
            cartContainer.append(itemHTML);
        });

        let totalAmount = 0;
        cart.forEach(item => {
            totalAmount += item.price * item.quantity;
        });

        const totalAmountContainer = $('#zakaz-summa');
        totalAmountContainer.empty();
        totalAmountContainer.text(`${totalAmount} ₽`);

        // 统一控制空状态与购物车容器的显示切换
        if (cart.length === 0) {
            $('#zakaz-pusto').show();
            $('#cart-object').hide();
        } else {
            $('#zakaz-pusto').hide();
            $('#cart-object').show();
        }
    }

    $('#zakaz-menu').on('click', '.quantity-button', function () {
        const action = $(this).data('action');
        const itemName = $(this).data('name');
        const itemToUpdate = cart.find(item => item.name === itemName);

        if (action === 'increase') {
            itemToUpdate.quantity++;
        } else if (action === 'decrease' && itemToUpdate.quantity > 1) {
            itemToUpdate.quantity--;
        } else if (action === 'item-delete') {
            // 过滤掉要删除的商品，而非清空整个购物车
            cart = cart.filter(item => item.name !== itemName);
        } else if (action === 'decrease' && itemToUpdate.quantity === 1) {
            // 数量减到1时删除该商品
            cart = cart.filter(item => item.name !== itemName);
        }

        updateCartDisplay();
    });
});

关键修改点说明 #

• 将const cart = []改为let cart = []：因为后续需要通过filter重新赋值数组，const声明的变量无法修改引用。
• 重构updateCartDisplay中的空状态处理：直接通过show()和hide()控制元素显示，替代原来的append操作，确保状态切换正确。
• 修正删除商品逻辑：使用cart.filter()删除指定商品，保留其他商品，符合常规购物车行为。
• 移除$('.button-buy')中的硬编码显示控制：把显示逻辑统一放到updateCartDisplay中，避免代码冗余和状态不一致。

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