这是来自telmo sampiao的购物车系列的代码,im缺少删除项目和增加/减少按钮,同时还包括它在本地存储。
function displayCart(){
let cartItems = localStorage.getItem("productsInCart");
cartItems = JSON.parse(cartItems);
let productContainer = document.querySelector(".products");
let cartCost = localStorage.getItem('totalCost');
console.log(cartItems);
if( cartItems && productContainer){
productContainer.innerHTML = '';
Object.values(cartItems).map(item => {
productContainer.innerHTML += `
<div class="product">
<button class="btn btn-danger remove">Remove</button>
<img src="./img/${item.tag}.jpg">
<span>${item.name}</span>
</div>
<div class="price">
₱${item.price}.00
</div>
<div class="quantity"><i class="fa-solid fa-plus"></i> <span>${item.inCart}</span> <i class="fa-solid fa-minus"></i></div>
<div class="total">
₱${item.inCart * item.price}.00
</div>
`
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">
Cart Total
</h4>
<h4 class="basketTotal">
₱${cartCost}.00
</h4>
`;
}
}
我不擅长javascript,我尝试了许多不同的东西,但没有工作
1条答案
按热度按时间pw136qt21#
您只能为几个不同的输入存储一个值。您需要分别标识每个输入的每个值。
超文本标记语言
添加一个唯一的属性“data-key”,或者你可以使用每个元素的“id”。
J查询
我修改了你的代码。请看下面的注解。现在“数据键”被用作localStorage的键。