Html&Js购物车仅首个商品显示图片的问题求助

问题描述 #

大家好，我遇到一个购物车的奇怪问题：当我把商品数量设为大于0添加到购物车后，只有第一个商品能显示图片，其他商品的图片都不出来。我已经尝试过重写cart_loader()函数、更换图片路径，还在控制台打印调试，但都没找到问题所在。

我的操作过程：最开始我写了相关的函数，添加第一个商品时一切正常，但只要添加第二个商品，就只有第一个商品显示图片，我希望所有添加的商品都能正常显示图片。

我的代码 #

let cart = [
    {id: 1, name:"Ryzen 7 7800X3D", price:455, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 2, name:"r9_9900X", price:470, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 3, name:"r9_9800X3D", price:760, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 4, name:"r5_7500f", price:122, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 5, name:"rx_7900XTX", price:910, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 6, name:"Herr Dreier", price:69420, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 7, name:"rx_7700XT", price:540, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 8, name:"r7_7800X3D", price:455, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
];

function addCartItem(img, Names, price, id) {
  cartList = document.querySelector("#cart ul");
  li = document.createElement("li");
  li.innerHTML = `
    <div class="item" id="${price}">
     <img src="${img}" alt="">
    <p id="1me">${Names}</p>
    <label for="Quantity">Quantity</label>
    <select name="Quantity" id="${id}" onchange="update_quantity(this.value, ${id})">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <p>${price}</p>
    <button type="button" onclick="remove_item();"><i class="fa-solid fa-xmark"></i></button>
    </div>
`;
  cartList.appendChild(li);
};

function cart_loader() {
  load_cart();
  x = 0;
  while (x < cart.length) {
    price_calc(x);
    if (cart[x].quantity >= 1) {
      addCartItem(cart[x].img, cart[x].name, cart[x].finalprice + "€", cart[x].id)
    };
    x++;
  };
  total_price();
};
cart_loader();

解决方案 #

我帮你排查了代码，发现几个关键问题导致了图片显示异常，以下是修复建议：

1. 修复全局变量污染问题

你的addCartItem和cart_loader函数里有多个未声明的变量（比如cartList、li、x），这些变量会自动成为全局变量。当循环创建多个商品元素时，全局变量会被反复覆盖，导致后续商品的DOM元素无法正确挂载。

修改方式：给这些变量加上const/let声明，将它们限定为局部变量：

function addCartItem(img, Names, price, id) {
  // 声明局部变量
  const cartList = document.querySelector("#cart ul");
  const li = document.createElement("li");
  // 后续代码不变
};

function cart_loader() {
  load_cart();
  const cartList = document.querySelector("#cart ul");
  // 声明局部变量x
  let x = 0;
  while (x < cart.length) {
    price_calc(x);
    if (cart[x].quantity >= 1) {
      addCartItem(cart[x].img, cart[x].name, cart[x].finalprice + "€", cart[x].id)
    };
    x++;
  };
  total_price();
};

2. 避免DOM元素ID重复

你在渲染商品时使用了重复的ID：

• <div class="item" id="${price}">：多个商品可能价格相同（比如ID1和ID8的价格都是455），导致ID重复
• <p id="1me">：固定ID，添加多个商品时会重复

DOM中重复的ID会干扰浏览器的元素识别，可能间接导致渲染异常。修改为唯一ID，比如用商品ID作为标识：

li.innerHTML = `
  <div class="item" id="item-${id}">
   <img src="${img}" alt="${Names}">
  <p id="item-name-${id}">${Names}</p>
  <label for="quantity-${id}">Quantity</label>
  <select name="Quantity" id="quantity-${id}" onchange="update_quantity(this.value, ${id})">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  </select>
  <p>${price}</p>
  <button type="button" onclick="remove_item(${id});"><i class="fa-solid fa-xmark"></i></button>
  </div>
`;

顺便给img标签加上有意义的alt属性，既符合Web规范也方便调试。

3. 渲染前清空购物车列表

每次调用cart_loader时，没有清空现有购物车内容，会导致商品重复添加，旧元素和新元素可能产生冲突。在渲染前先清空列表：

function cart_loader() {
  load_cart();
  const cartList = document.querySelector("#cart ul");
  // 清空现有内容
  cartList.innerHTML = "";
  let x = 0;
  while (x < cart.length) {
    price_calc(x);
    if (cart[x].quantity >= 1) {
      addCartItem(cart[x].img, cart[x].name, cart[x].finalprice + "€", cart[x].id)
    };
    x++;
  };
  total_price();
};

4. 额外检查点

你还可以检查load_cart()函数，确认它在从本地存储读取购物车数据时，没有丢失或修改商品的img字段——如果这个字段被意外清空，也会导致图片无法显示。

按照以上方式修改代码后，应该能解决仅首个商品显示图片的问题了。

备注：内容来源于stack exchange，提问作者DerPhilovic