纯js购物车

-2

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

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的。

来源

2017-10-11 Egor Novozhilov

[创建仅使用HTML/JavaScript的购物车（的可能的复制https://stackoverflow.com/questions/16293977/creating-a-shopping-cart -using-only-html-javascript） –

document.querySelector返回匹配选择器的第一个元素。 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector。也许你想document.querySelectorAll（）？更好的element.querySelectorAll（）（https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll）返回一个所有元素的列表，这些元素来自调用它的元素的后代，该元素匹配选择器。这样你就可以将它限制在你每次工作的特定div上。如果你花时间搜索，答案常常在文档中。 – ADyson

https://stackoverflow.com/questions/16293977/creating-a-shopping-cart-using-only-html-javascript不是我的问题的解决方案，事情是，我想写在纯JS上，没有使用simpleCart或jQuery –

所以我这样做了

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(); 
    } 
});

来源

2017-10-25 06:40:19

回答

相关问题