如何分别增加和减少数量？

Question

我正在通过纯JS实现购物车增加和减少function。 当我点击 + 或 - 按钮时，如果购物车中有 2 件商品，则其中 2 件将同时增加或减少。

这是我的代码

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 data-action="remove" onclick='decrease()'>-</button>
                    <input name='product' class="product__quantity" type="number" min='1' max='100' value='${product.count}'>
                    <button data-action="add" onclick='increase()'>+</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 increase() {
    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));
    tableBody.innerHTML = '';
    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--;
        if (products[i].count <= 0) {
            const itemIndex = products.findIndex(product => product.count === 0);
            products.splice(itemIndex, 1);
        }
    }
    localStorage.setItem('products', JSON.stringify(products));
    tableBody.innerHTML = '';
    loadCart();
}

有人帮我解决这个问题。

Answer 1

问题出在你的 for 循环中。 您遍历 products 数组，然后更新每个产品的计数。

inputValue = products[i].count++;

您应该只更新所选产品的数量，您可以通过将产品标识符传递给您的增减函数来执行此操作。

代码中还有其他问题，但上面应该回答您的问题；