如何让代码在购物车中显示保存在cartData中的所有产品，而不是只显示最后一个产品？

Question

我认为解决方案可以修改最后一行

cartItems.innerHTML = cartHTML

以根据 cartData 中的产品数量（基于其长度）在循环中越来越可重复。有人可以帮我吗？

                for (var i = 0; i<cartData.length; i++) {
                    this["cartData"+i]=cartData[i]
                

                    let cartHTML = `
                    <tr class="cart-row">
                        <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
                        <td><img src="${cartData[i][2]}" alt=""></td>
                        <td>${cartData[i][0]}</td>
                        <td class="cart-price">DZD ${cartData[i][1]}</td>
                        <td><input class="cart-quantity-input" type="number" value="1"></td>
                        <td class="cart-sub-total">DZD ${cartData[i][1]}</td>
                    </tr>`;
                    //console.log(i)
                    **cartItems.innerHTML = cartHTML**
}

线

cartItems.innerHTML = cartHTML

必须根据 cartData 中的产品数量（基于其长度）在循环中越来越多地重复。

Answer 1

在循环的每次迭代中，您都在重写 cartItems innerHTML 而不是添加它。

而不是这样做：

cartItems.innerHTML = cartHTML

你应该这样做：

cartItems.innerHTML = cartItems.innerHTML + cartHTML

你可以重写为：

cartItems.innerHTML += cartHTML

仍然请注意，完整地创建表格的 HTML 并将其一次性附加到页面可能会更好。为什么？因为每次您向页面添加内容时，您都会强制浏览器进行一系列“昂贵”的计算，以了解如何使用您提供的新内容重新呈现页面。

所以像：

  const cartRows = "";

  for (var i = 0; i < cartData.length; i++) {
    this["cartData" + i] = cartData[i]


    const cartRow = `
        <tr class="cart-row">
            <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
            <td><img src="${cartData[i][2]}" alt=""></td>
            <td>${cartData[i][0]}</td>
            <td class="cart-price">DZD ${cartData[i][1]}</td>
            <td><input class="cart-quantity-input" type="number" value="1"></td>
            <td class="cart-sub-total">DZD ${cartData[i][1]}</td>
        </tr>`
      ;

    cartRows += cartRow;
  }

  cartItems.innerHTML = cartRows;