＆＃x27;从购物车中删除项目＆＃x27;和管理数量＆＃x27;当我添加更多产品时，按钮不起作用

Question

我正在设计一个电子商务网站，并且由于我不擅长使用JavaScript进行DOM操作，因此要在网站上添加购物车功能，所以我刚刚从Github复制了一些代码。所有情况都可以正常工作，当我添加产品时，它会添加到购物车中，当我单击“删除”按钮或尝试增加或减少产品的数量时，它可以正常工作。唯一的问题是，当我尝试在产品部分添加更多产品时。删除按钮并增加/减少数量按钮停止工作。有人可以帮我吗？

products.html文件中的产品看起来像这样。

<div class="image">
            <img src="../images/greytshirt.jpg" alt="thsirt1">
            <h3> 
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star-outline"></ion-icon>
            </h3>
            <h3>Grey Tshirt 
            </h3>
            <h3>$15,00</h3>
            <a class="add-cart cart1" href="#">Add to Cart</a>
            <input type="hidden" value="15"/>
        </div>
        <div class="image">
            <img src="../images/greyhoddie.jpg" alt="thsirt1">
            <h3> 
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star"></ion-icon>
                <ion-icon name="star-half"></ion-icon>
            </h3>
            <h3>Grey Hoddie</h3>
            <h3>$20,00</h3>
            <a class="add-cart cart2" href="#">Add to Cart</a>
            <input type="hidden" value="20"/>
        </div>

main.js文件（所有函数均在此文件中实现）

/*------------------------------------------------Js for cart related functionalities------------------------------------------------*/
let carts = document.querySelectorAll('.add-cart');

let products = [ 
    {
        name: "Grey Tshirt",
        tag: "greytshirt",
        price: 15,
        inCart: 0
    },
    {
        name: "Grey Hoddie",
        tag: "greyhoddie",
        price: 20,
        inCart: 0
    },
    {
        name: "Black Tshirt",
        tag: "blacktshirt",
        price: 15,
        inCart: 0
    },
    {
        name: "Black Hoddie",
        tag: "blackhoddie",
        price: 20,
        inCart: 0
    }
];

for(let i=0; i< carts.length; i++) {
    carts[i].addEventListener('click', () => {
        console.log(products[i]);
        cartNumbers(products[i]);
        totalCost(products[i]);
    });
}

function onLoadCartNumbers() {
    let productNumbers = localStorage.getItem('cartNumbers');
    if( productNumbers ) {
        document.querySelector('.cart span').textContent = productNumbers;
    }
}

function cartNumbers(product, action) {
    let productNumbers = localStorage.getItem('cartNumbers');
    productNumbers = parseInt(productNumbers);

    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if( action ) {
        localStorage.setItem("cartNumbers", productNumbers - 1);
        document.querySelector('.cart span').textContent = productNumbers - 1;
        console.log("action running");
    } else if( productNumbers ) {
        localStorage.setItem("cartNumbers", productNumbers + 1);
        document.querySelector('.cart span').textContent = productNumbers + 1;
    } else {
        localStorage.setItem("cartNumbers", 1);
        document.querySelector('.cart span').textContent = 1;
    }
    setItems(product);
}

function setItems(product) {
    // let productNumbers = localStorage.getItem('cartNumbers');
    // productNumbers = parseInt(productNumbers);
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if(cartItems != null) {
        let currentProduct = product.tag;
    
        if( cartItems[currentProduct] == undefined ) {
            cartItems = {
                ...cartItems,
                [currentProduct]: product
            }
        } 
        cartItems[currentProduct].inCart += 1;

    } else {
        product.inCart = 1;
        cartItems = { 
            [product.tag]: product
        };
    }

    localStorage.setItem('productsInCart', JSON.stringify(cartItems));
}

function totalCost( product, action ) {
    let cart = localStorage.getItem("totalCost");

    if( action) {
        cart = parseInt(cart);

        localStorage.setItem("totalCost", cart - product.price);
    } else if(cart != null) {
        
        cart = parseInt(cart);
        localStorage.setItem("totalCost", cart + product.price);
    
    } else {
        localStorage.setItem("totalCost", product.price);
    }
}

function displayCart() {
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    let cart = localStorage.getItem("totalCost");
    cart = parseInt(cart);

    let productContainer = document.querySelector('.products');
    
    if( cartItems && productContainer ) {
        productContainer.innerHTML = '';
        Object.values(cartItems).map( (item, index) => {
            productContainer.innerHTML += 
            `<div class="product"><ion-icon name="close-circle"></ion-icon><img src="../images/${item.tag}.jpg" />
                <span class="sm-hide">${item.name}</span>
            </div>
            <div class="price sm-hide">$${item.price},00</div>
            <div class="quantity">
                <ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon>
                    <span>${item.inCart}</span>
                <ion-icon class="increase" name="arrow-dropright-circle"></ion-icon>   
            </div>
            <div class="total">$${item.inCart * item.price},00</div>`;
        });

        productContainer.innerHTML += `
            <div class="basketTotalContainer">
                <h4 class="basketTotalTitle">Basket Total</h4>
                <h4 class="basketTotal">$${cart},00</h4>
                <input class="empty" onclick="emptyCart()" value="Empty Cart">
            </div>
            <div class="checkout"><button class="placeorder btn" onclick="checkout()">Place Order</button></div>`

        deleteButtons();
        manageQuantity();
    }
}

function manageQuantity() {
    let decreaseButtons = document.querySelectorAll('.decrease');
    let increaseButtons = document.querySelectorAll('.increase');
    let currentQuantity = 0;
    let currentProduct = '';
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    for(let i=0; i < increaseButtons.length; i++) {
        decreaseButtons[i].addEventListener('click', () => {

            currentQuantity = decreaseButtons[i].parentElement.querySelector('span').textContent;

            currentProduct = decreaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLocaleLowerCase().replace(/ /g,'').trim();


            if( cartItems[currentProduct].inCart > 1 ) {
                cartItems[currentProduct].inCart -= 1;
                cartNumbers(cartItems[currentProduct], "decrease");
                totalCost(cartItems[currentProduct], "decrease");
                localStorage.setItem('productsInCart', JSON.stringify(cartItems));
                displayCart();
            }
        });

        increaseButtons[i].addEventListener('click', () => {
            currentQuantity = increaseButtons[i].parentElement.querySelector('span').textContent;
            currentProduct = increaseButtons[i].parentElement.previousElementSibling.previousElementSibling.querySelector('span').textContent.toLocaleLowerCase().replace(/ /g,'').trim();

            cartItems[currentProduct].inCart += 1;
            cartNumbers(cartItems[currentProduct]);
            totalCost(cartItems[currentProduct]);
            localStorage.setItem('productsInCart', JSON.stringify(cartItems));
            displayCart();
        });
    }
}

function deleteButtons() {
    let deleteButtons = document.querySelectorAll('.product ion-icon');
    let productNumbers = localStorage.getItem('cartNumbers');
    let cartCost = localStorage.getItem("totalCost");
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    let productName;

    for(let i=0; i < deleteButtons.length; i++) {
        deleteButtons[i].addEventListener('click', () => {
            productName = deleteButtons[i].parentElement.textContent.toLocaleLowerCase().replace(/ /g,'').trim();
           
            localStorage.setItem('cartNumbers', productNumbers - cartItems[productName].inCart);
            localStorage.setItem('totalCost', cartCost - ( cartItems[productName].price * cartItems[productName].inCart));

            delete cartItems[productName];
            localStorage.setItem('productsInCart', JSON.stringify(cartItems));

            displayCart();
            onLoadCartNumbers();
        })
    }
}

function checkout(){
    emptyCart();
    alert("Your order has been placed successfully.");
}

function emptyCart(){
    localStorage.clear();
    location.reload();
}

onLoadCartNumbers();
displayCart();

，最后，这是cart.html文件

<body>
    {{>header2}}
    <div class="container-products">
        <div class="product-header">
            <div class="cart-h">Your Cart</div>
        </div>
        <div class="products">
        <! -- This section is populated using Javascript -->
        </div>
    </div>
    {{>footer}}
    <script src="js/main.js"></script>
    <script src="js/index.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>

Answer 1

问题是，在添加新的元素之前，请在匹配元素上注册“点击事件”的事件侦听器。

一个简单的解决方案是没有实际按钮的事件侦听器，而是将其绑起来进行文档，然后在按钮上查找适当的类。

这个答案非常基本，只是为了证明这个概念。如果您注意到事件侦听器后的按钮已添加到DOM，但仍然可以使用。

document.addEventListener("click",function(e){
   let btn = e.target;
   if(btn.className.includes("increase")){
     console.log("increase")
   }
   else if(btn.className.includes("decrease")){
     console.log("decrease")
   }
});
let dest = document.querySelector("#dest");
dest.innerHTML = '<button class="increase">Increase</button><button class="decrease">Decrease</button>';

<div id="dest"></div>