如何在购物车中显示所有商品，而不仅仅是最后一个？

第一段引用上面的摘要：

本文旨在解决购物车中仅显示最后一个商品的问题。通过分析问题代码，我们发现循环中每次都覆盖了 cartItems.innerHTML，导致只显示最后一次循环的结果。本文将提供两种解决方案：一种是累加 HTML 字符串，另一种是先构建完整的 HTML 字符串，然后一次性更新 cartItems.innerHTML，后者性能更优。

问题分析

在购物车功能开发中，经常会遇到需要将多个商品信息动态渲染到页面的情况。一个常见的问题是，循环遍历购物车数据时，由于不正确的 DOM 操作，导致购物车只显示最后一个商品，而不是所有商品。 这通常是因为在循环中直接覆盖了 innerHTML 属性，导致之前添加的商品信息被覆盖。

解决方案一：累加 HTML 字符串

最直接的解决方案是，在每次循环迭代时，将新的 HTML 字符串累加到 cartItems.innerHTML 中，而不是直接覆盖它。

修改代码如下：

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>@@##@@</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>`;
cartItems.innerHTML += cartHTML;
}

在这个修改后的代码中，cartItems.innerHTML += cartHTML 语句将新的 cartHTML 添加到现有的 cartItems.innerHTML 内容中，从而确保所有商品都显示在购物车中。

解决方案二：构建完整的 HTML 字符串后一次性更新

虽然累加 HTML 字符串可以解决问题，但每次修改 innerHTML 都会触发浏览器的重绘（repaint）和重排（reflow），这会降低性能。 更高效的解决方案是，在循环中构建完整的 HTML 字符串，然后在循环结束后，一次性更新 cartItems.innerHTML。

修改后的代码如下：

let 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>@@##@@</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;

在这个修改后的代码中，我们首先初始化一个空字符串 cartRows。 在循环中，我们将每个商品的 HTML 字符串累加到 cartRows 中。 循环结束后，我们使用 cartItems.innerHTML = cartRows 语句，一次性更新 cartItems.innerHTML。 这种方法只触发一次重绘和重排，因此性能更高。

总结

在处理动态渲染列表的问题时，应避免在循环中频繁操作 DOM。 优先选择先构建完整的 HTML 字符串，然后一次性更新 DOM 的方法，以提高性能。 累加 HTML 字符串虽然简单，但在性能要求较高的场景下应谨慎使用。