纯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/ 创建购物车仅使用 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();
    }
});