我正在使用从 json-server 获取的产品构建购物车。我已经设法显示产品,实现添加到购物车功能并显示数量,但是,我现在被困在增量和减量功能上。这个想法是每次用户单击 + 和 - 按钮时, product.count 属性都会发生变化(我用它来将它显示在购物车表上)。这是我的代码
load cart from localstorage
function loadCart() {
let products = JSON.parse(localStorage.getItem('products'));
let cartTotalItem = document.querySelector('.cart__value');
cartTotalItem.textContent = products.length;
products.forEach(product => {
let cartItem = document.createElement('tr');
cartItem.innerHTML = `<td><img src="${product.imgSrc}" alt='product image'></td>
<td>${product.name}</td>
<td><span class='cart-price'>${product.price},000vnd</span></td>
<td>
<button action="remove" onclick='decrease()'>-</button>
<input name='product' class="product__quantity" type="number" min='1' max='100' value='${product.count}'>
<button action="add" onclick='change()' >+</button>
</td>
<td><span class='cart-total-value'>${parseInt(product.price) * product.count},000vnd</span></td>
<td>
<button class="delete--item"><i class="far fa-trash-alt"></i></button>
</td>`;
tableBody.appendChild(cartItem);
});
}
我尝试实现的功能
function change() {
let products = JSON.parse(localStorage.getItem('products'));
for (let i = 0; i < products.length; i++) {
let inputValue = document.querySelector('.product__quantity').textContent
inputValue = products[i].count++
localStorage.setItem('products', JSON.stringify(products))
}
}
function decrease() {
let products = JSON.parse(localStorage.getItem('products'));
for (let i = 0; i < products.length; i++) {
let inputValue = document.querySelector('.product__quantity').value
inputValue = products[i].count--
localStorage.setItem('products', JSON.stringify(products))
}
}
问题是我必须再次重新加载页面才能使更改反映在页面上。有人可以帮我吗?
答案 0 :(得分:0)
我认为您需要在 localStorage 中的产品更改后再次调用 loadCart()。
function change() {
let products = JSON.parse(localStorage.getItem('products'));
for (let i = 0; i < products.length; i++) {
let inputValue = document.querySelector('.product__quantity').textContent
inputValue = products[i].count++
localStorage.setItem('products', JSON.stringify(products))
}
loadCart()
}
function decrease() {
let products = JSON.parse(localStorage.getItem('products'));
for (let i = 0; i < products.length; i++) {
let inputValue = document.querySelector('.product__quantity').value
inputValue = products[i].count--
localStorage.setItem('products', JSON.stringify(products))
}
loadCart()
}