纯js购物车

Question

我想用纯JS做一个购物车。我试图用我的产品和按钮动态创建一些div来增加/减少/删除它们，但我被卡住了。以下是我创建这些div的功能：

function displayCart() { 
let output = ''; 
for (let i in cart) { 
    output += '<div class="card card-body cartc">' + '<p>' + 
     '<span id="' + cart[i].name + '">' + cart[i].name + '</span>' + 
     '<button class="minus">-</button>' + 
     ' ' + cart[i].count + ' шт.' + 
     '<button class="plus">+</button>' + 
     '<button class="delete">x</button>' + 
     '</p>' + '</div>'; 
}; 
document.querySelector('.cart').innerHTML = output; 
document.querySelector('.total').innerHTML = totalCost();} 

所以下一步就是将事件放在按钮上。

document.addEventListener("click", function (event) { 
if (document.querySelector('.minus')) { 
    let name = this.querySelector('.cartc span').getAttribute("id"); 
    removeItemFromCart(name); 
    displayCart(); 
}}); 

正如你所看到的，找到的第一个.cart跨度ID，并返回给removeItemFromCart()，但这个功能应该在我创造，不只是第一个DIV每工作。它如何解决？

你可以看看整个项目在https://enoltc.github.io/hw-2/或https://github.com/ENoLTC/hw-2/ Creating a Shopping Cart using only HTML/JavaScript 不同的是，我想写我的纯JavaScript脚本，而不使用simpleCart或jQuery的。

Answer 1

所以我这样做了

let buttons = document.getElementById("show-cart"); 
buttons.addEventListener("click", function (event) { 
    let name = event.target.getAttribute("data-name"); 
    if (event.target.className === "delete") { 
     removeItemFromCartAll(name); 
     displayCart(); 
    } else if (event.target.className === "minus") { 
     removeItemFromCart(name); 
     displayCart(); 
    } else if (event.target.className === "plus") { 
     addItemToCart(name, 0, 1); 
     displayCart(); 
    } 
});