正确显示购物车中所有商品：JavaScript 购物车渲染优化教程

本文旨在解决 JavaScript 购物车中仅显示最后一个商品的问题。通过修改循环内的 HTML 赋值方式，避免每次循环覆盖之前的商品信息。同时，提供更高效的购物车渲染方法，一次性构建完整的 HTML 字符串，减少浏览器重绘次数，提升用户体验。

在 JavaScript 购物车实现中，经常会遇到只显示购物车中最后一个商品的问题。这通常是由于在循环中错误地覆盖了 innerHTML 属性导致的。以下将详细介绍如何解决这个问题，并提供一种更高效的购物车渲染方法。

问题分析

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

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

解决方案：累加 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;
}

更优方案：一次性渲染

虽然上述解决方案可以解决问题，但效率不高。每次修改 innerHTML 都会触发浏览器的重绘（repaint）和回流（reflow），这会消耗大量的资源。为了优化性能，建议一次性构建完整的 HTML 字符串，然后将其赋值给 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;

代码解释

1. 首先，定义一个空字符串 cartRows，用于存储所有商品的 HTML 代码。
2. 在循环中，将每个商品的 HTML 代码添加到 cartRows 中。
3. 循环结束后，将完整的 cartRows 字符串赋值给 cartItems.innerHTML。

注意事项

• 确保 cartItems 元素在 HTML 中已经存在，并且是正确的容器。
• 在实际项目中，建议使用模板引擎（如 Handlebars、Mustache）或现代 JavaScript 框架（如 React、Vue、Angular）来管理 HTML 代码，这样可以提高代码的可维护性和可读性。
• 考虑对 cartData 进行错误处理，例如，如果 cartData 为空，则显示一个空购物车的提示信息。

总结

通过修改 HTML 赋值方式，可以解决 JavaScript 购物车中只显示最后一个商品的问题。为了提高性能，建议采用一次性渲染的方式，避免频繁修改 innerHTML 属性。在实际项目中，可以结合模板引擎或现代 JavaScript 框架，构建更健壮、可维护的购物车功能。