[英]pure js shopping cart
I'm trying to make a shopping cart with pure JS.我正在尝试用纯 JS 制作购物车。 I'm trying to dynamically create some divs with my products and buttons to increase/decrease/delete them, but I am stuck.我试图用我的产品和按钮动态创建一些 div 来增加/减少/删除它们,但我被卡住了。 Below is my function which is creating these divs:下面是我创建这些 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();}
So the next step is to put events on buttons.所以下一步是将事件放在按钮上。
document.addEventListener("click", function (event) {
if (document.querySelector('.minus')) {
let name = this.querySelector('.cartc span').getAttribute("id");
removeItemFromCart(name);
displayCart();
}});
As you can see, it finds the first .cart
span id and returns it to removeItemFromCart()
, but this function should work in every div that I create, not just the first one.如您所见,它找到第一个.cart
跨度 ID 并将其返回给removeItemFromCart()
,但此函数应该在我创建的每个 div 中都可以使用,而不仅仅是第一个。 How can it be solved?如何解决?
You can take a look at the whole project at https://enoltc.github.io/hw-2/ or https://github.com/ENoLTC/hw-2/ Creating a Shopping Cart using only HTML/JavaScript The difference is that I want to write my script in pure JavaScript, without using simpleCart or jQuery.您可以在https://enoltc.github.io/hw-2/或https://github.com/ENoLTC/hw-2/ 创建购物车仅使用 HTML/JavaScript 来查看整个项目的区别是我想用纯 JavaScript 编写我的脚本,而不使用 simpleCart 或 jQuery。
So I did it this way所以我是这样做的
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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.