包含对象的数组，increasing/decreasing 单击按钮后对象中的值之一

Question

我真是菜鸟。我正在努力实施购物车，但我坚持使用其中一项功能。将产品放入我的购物车（从本地存储）后，我想操纵每个产品的数量。

[
  {
    "name": "Havana",
    "price": 475,
    "inCart": 5
  },
  {
    "name": "Cubana",
    "price": 150,
    "inCart": 3
  },
  {
    "name": "Malibu",
    "price": 105,
    "inCart": 3
  }
]


getFromStorage(product);

function getFromStorage() {
    product = JSON.parse(localStorage.getItem("product"));
    console.log(product);
    product.forEach(({ name, price, inCart }) => {
    cart.innerHTML += `
<div>${name}</div>
<div>${price}</div>
<i class="fas fa-minus-square"></i>
<div class="in-cart">${inCart}</div>
<i class="fas fa-plus-square"></i>
    `
  })
}

显示我的购物车后，我想使用按钮来增加和减少 inCart 的价值

我已经开始将代码写入 increase/decrease inCart 的值，但我不知道如何访问元素。我想在本地存储中动态更新这个数量。

const decrease = document.querySelectorAll(".fa-minus-square");

for (let i = 0; i < decrease.length; i++) {
  decrease[i].addEventListener("click", () => {
    product = JSON.parse(localStorage.getItem("product"));

如果有人能帮助我，那就太好了！

Answer 1

首先，最好用ID来标识你的产品。产品对象可能如下所示：

{
    id: string,
    name: string,
    price: number,
    quantity: number,
}

函数 getFromStorage 似乎没问题，但为了更好的命名，我认为你应该将 product 重命名为 products，尽管如此它得到 0 个参数但是当你在第 0 行调用它时你提供一个参数。

getFromStorage();

function getFromStorage() {
    products = JSON.parse(localStorage.getItem("product"));
    console.log(product);
    products.forEach(({ id, name, price, inCart }) => {
    cart.innerHTML += `
      <div>${name}</div>
      <div>${price}</div>
      <i class="fas fa-minus-square" onClick=`handleQuantityChange(${id},-1)`></i>
      <div class="in-cart">${inCart}</div>
      <i class="fas fa-plus-square"></i>
    `
  })
}

最终函数 handleQuantityChange 将获得 2 个参数：产品 ID 和差异。您将来可能会使用相同的功能，但使用“1”第二个参数来处理 increase

function handleQuaintityChange(id, diff){
   const product = products.find(prod=>prod.id===id);
   if(!product) return;
   product.quantity+=diff;
   return true
}

包含对象的数组，increasing/decreasing 单击按钮后对象中的值之一

Array with objects, increasing/decreasing one of the value in object after click on button

javascript

arrays

object

shopping-cart