点击购买按钮时如何仅添加单个商品至购物车？

核心问题分析 #

你的代码当前存在两个关键问题，导致点击任意按钮都会添加所有商品：

1. 点击按钮时没有传递当前商品的唯一标识，无法区分触发的是哪一个商品
2. returnKey()函数遍历了localStorage的所有键值对，每次执行都会把所有商品重新渲染到购物车

代码修改方案 #

以下是修复后的完整代码，关键修改处已标注：

const shopContainer = document.querySelector(".shop-content");

let productTitle;
let productDescription;
let productImage;
let productPrice;
let productCategory;
let productId;
let productKey = [];
let productArray = [];

let output = "";

const url = "https://fakestoreapi.com/products";

let data = fetch(url)
  .then((res) => res.json())
  .then((data) => {
    for (let i = 0; i < data.length; i++) {
      productTitle = data[i].title;
      productDescription = data[i].description;
      productImage = data[i].image;
      productPrice = data[i].price;
      productCategory = data[i].category;
      productId = data[i].id;
      productArray[i] = [
        productTitle,
        productDescription,
        productImage,
        productPrice,
        productCategory,
        productId,
      ];
      productKey[i] = data[i].id;
      localStorage.setItem(productKey[i], JSON.stringify(productArray[i]));
    }
    showApi();
  });

function showApi() {
  for (let i = 0; i < productArray.length; i++) {
    output += `
              <div class="product-box">
              <img class="product" src="${productArray[i][2]}" alt="product image">
              <h2 class="product-title">${productArray[i][0]}</h2>
                  <div class="bottom-box">
                  <span class="price">${productArray[i][3]}$</span>
                  <!-- 修改1：点击时传递当前商品的索引i -->
                  <i class='bx bx-shopping-bag add-cart' id="${i}" onclick="returnKey(${i})"></i>
                  </div>
                </div>
          `;
  }
  shopContainer.innerHTML = output;
};

let inputCart = document.querySelector(".inputCart")

// 修改2：接收点击的商品索引参数
function returnKey(productIndex) {
  // 根据索引获取对应商品的localStorage键
  const productKey = productArray[productIndex][5];
  // 仅获取当前点击的商品数据
  const completeProduct = JSON.parse(localStorage.getItem(productKey))

  let cartPrice = document.createElement("p");
  let cartTitle = document.createElement("p");
  let cartImage = document.createElement("img");
  
  inputCart.appendChild(cartPrice);
  inputCart.appendChild(cartImage);
  inputCart.appendChild(cartTitle);
  
  cartTitle.setAttribute("class", "cart-title")
  cartImage.setAttribute("src", completeProduct[2]);
  cartImage.setAttribute("width", "75");
  cartImage.setAttribute("height", "75");

  cartTitle.innerHTML = completeProduct[0];
  cartPrice.innerHTML = ("$" + completeProduct[3]);

  // 删除原代码中覆盖购物车内容的错误行
  // inputCart.innerHTML = cartTitle;
};

关键修改说明 #

1. 传递商品标识：在按钮的onclick事件中传入当前商品的索引${i}，让returnKey函数明确知道要处理哪个商品
2. 仅处理目标商品：在returnKey中通过传入的索引找到对应商品的localStorage键，只获取该商品的数据进行渲染，不再遍历所有商品
3. 修复内容覆盖问题：移除inputCart.innerHTML = cartTitle;，这行代码会清空购物车容器并只保留最后一个商品的标题，导致之前添加的商品丢失

内容的提问来源于stack exchange，提问作者carlsby