使用 Javascript 删除所有项目后如何显示 "cart is empty"？

Question

我有点卡住了，希望有人能帮助我。

基本上，我编写了一个购物车代码，目前正在尝试让购物车在移除所有购物车商品后显示一条消息，提示“购物车是空的”。

除购物车清空后重新显示“购物车为空”消息外，一切正常。

我尝试了一些方法，但在删除最后一个购物车商品时似乎无法显示 emptyCartMessage。

只是为了提供额外的上下文，我的购物车商品每个都有一个独立的 'remove' 按钮。

我的代码如下。

感谢您的帮助，非常感谢！

const currentCartItems = document.getElementsByClassName('cart-item');
const emptyCartMessage = document.createElement('p');
emptyCartMessage.innerHTML = 'Your cart is empty.';


// EMPTY CART ITEM DISPLAY MESSAGE
shoppingCart.appendChild(emptyCartMessage);
    



// SHOPPING AREA BUTTON EVENT LISTENER

for (var i = 0; i < addToCartButton.length; i++) {
    addToCartButton[i].addEventListener('click', createCartItem);
    
}


function createCartItem(event) {

    //CREATE CART LI ITEM
    const newItem = document.createElement('li');
    newItem.className = 'cart-item';
    //newItem.innerHTML = event.target.value;

    //GET AND SET SHOP/CART ITEM VALUE 
    const itemValue = document.createElement('p');
    itemValue.innerHTML = event.target.value;

    //CREATE CART ITEM DESCRIPTION 
    const p = document.createElement('p');
    p.innerHTML = itemDescription;

    //CREATE CANCEL CART ITEM BUTTON
    const cancelItemImage = document.createElement('img');
    cancelItemImage.className = "remove-button";
    cancelItemImage.src = "images/cancel-icon.png";
    cancelItemImage.alt = "red remove icon";
   
    newItem.appendChild(itemValue);
    newItem.appendChild(p);
    newItem.appendChild(cancelItemImage);

    shoppingCart.appendChild(newItem);

    if (currentCartItems.length > 0) {
        emptyCartMessage.className = 'hide-empty-cart';
    } else if (currentCartItems.length <= 0) {
        emptyCartMessage.classList.remove('hide-empty-cart');
    }
    
}

// REMOVE CART ITEMS BUTTON 

shoppingCart.addEventListener('click', (e) => {

    if (e.target.className === 'remove-button'){
        const li = e.target.parentNode;
        const ol = li.parentNode;
        ol.removeChild(li);

    }

});

Answer 1

请删除此行 const currentCartItems = document.getElementsByClassName('cart-item');

我们将在函数 'createCartItem' 和我刚刚创建的 'removeCartItem' 内部使用这个变量。所以当调用createCartItem时我们总是可以显示购物车商品，因为这个函数添加了新商品，所以购物车不是空的。

在 remove 函数中，我们首先获取当前商品的数量，然后检查它是否小于或等于 0，然后我们隐藏购物车。

所以最终版本应该是。

const emptyCartMessage = document.createElement('p');
emptyCartMessage.innerHTML = 'Your cart is empty.';

// EMPTY CART ITEM DISPLAY MESSAGE
shoppingCart.appendChild(emptyCartMessage);
    
// SHOPPING AREA BUTTON EVENT LISTENER

for (var i = 0; i < addToCartButton.length; i++) {
    addToCartButton[i].addEventListener('click', createCartItem);
    
}

function createCartItem(event) {

    //CREATE CART LI ITEM
    const newItem = document.createElement('li');
    newItem.className = 'cart-item';
    //newItem.innerHTML = event.target.value;

    //GET AND SET SHOP/CART ITEM VALUE 
    const itemValue = document.createElement('p');
    itemValue.innerHTML = event.target.value;

    //CREATE CART ITEM DESCRIPTION 
    const p = document.createElement('p');
    p.innerHTML = itemDescription;

    //CREATE CANCEL CART ITEM BUTTON
    const cancelItemImage = document.createElement('img');
    cancelItemImage.className = "remove-button";
    cancelItemImage.src = "images/cancel-icon.png";
    cancelItemImage.alt = "red remove icon";
   
    newItem.appendChild(itemValue);
    newItem.appendChild(p);
    newItem.appendChild(cancelItemImage);

    shoppingCart.appendChild(newItem);

    // Always show because after every adding, we know that there is
    // at least one item, so we always showing cart
    emptyCartMessage.className = 'hide-empty-cart';
    
}

function removeCartItem(event){
    if (event.target.className === 'remove-button'){
        const li = e.target.parentNode;
        const ol = li.parentNode;
        ol.removeChild(li);

        // Get cart's current items
        const currentCartItems = document.getElementsByClassName('cart-item');

        // If cart items less then or equal to 0 then hide
        if (currentCartItems.length <= 0) {
          emptyCartMessage.classList.remove('hide-empty-cart');
        }
    }
}

// REMOVE CART ITEMS BUTTON 
shoppingCart.addEventListener('click', removeCartItem);

使用 Javascript 删除所有项目后如何显示 "cart is empty"？

How to show "cart is empty" after all items have been removed using Javascript?

javascript

jquery

shopping-cart