解决购物车只显示最后一个商品的问题：JavaScript 教程

第一段引用上面的摘要：

本文旨在解决购物车中只显示最后一个商品的问题。通过分析问题代码，我们将探讨如何正确地将所有商品信息添加到购物车HTML中。文章提供了两种解决方案：一种是累加HTML字符串，另一种是先构建完整的HTML字符串，然后一次性更新购物车内容，后者性能更优。我们将详细讲解代码实现，并强调性能优化的重要性。

在开发购物车功能时，一个常见的问题是循环遍历购物车数据，并将每个商品的信息添加到HTML中。然而，如果实现不当，可能会导致购物车只显示最后一个商品，而之前的商品信息被覆盖。本文将详细介绍如何避免这个问题，并提供两种有效的解决方案。

问题分析

原始代码的问题在于，在循环中，每次都使用 cartItems.innerHTML = cartHTML 覆盖了 cartItems 的内容。因此，循环结束后，cartItems 中只保留了最后一个商品的信息。

立即学习“Java免费学习笔记（深入）”；

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

最直接的解决方案是，在每次循环迭代时，将新的 HTML 代码追加到 cartItems 的现有内容中。这可以通过使用 += 运算符来实现。

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;
}

这段代码会将每个商品的 HTML 代码追加到 cartItems 中，从而确保所有商品都显示在购物车中。

解决方案二：构建完整的 HTML 字符串

虽然上述解决方案能够解决问题，但效率并不高。每次修改 innerHTML 都会触发浏览器的重新渲染，这在循环中会产生大量的性能开销。一个更优的方案是，先构建包含所有商品信息的完整 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 中。循环结束后，cartRows 包含了所有商品信息的完整 HTML 代码。最后，使用 cartItems.innerHTML = cartRows 一次性更新 cartItems 的内容。

性能优化

正如前面提到的，频繁地修改 innerHTML 会导致性能问题。因此，在处理大量数据时，建议使用第二种解决方案，即先构建完整的 HTML 字符串，然后一次性更新 innerHTML。 这种方法减少了浏览器重新渲染的次数，从而提高了性能。

总结

本文介绍了两种解决购物车只显示最后一个商品问题的方法。第一种方法是累加 HTML 字符串，简单易懂，但效率较低。第二种方法是构建完整的 HTML 字符串，然后一次性更新 innerHTML，效率更高，更适合处理大量数据。在实际开发中，应根据具体情况选择合适的解决方案，并注意性能优化。