純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

回答

相關問題