本文旨在解决 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;
代码解释
- 首先，定义一个空字符串 cartRows，用于存储所有商品的 HTML 代码。
- 在循环中，将每个商品的 HTML 代码添加到 cartRows 中。
- 循环结束后，将完整的 cartRows 字符串赋值给 cartItems.innerHTML。
注意事项
- 确保 cartItems 元素在 HTML 中已经存在，并且是正确的容器。
- 在实际项目中，建议使用模板引擎（如 Handlebars、Mustache）或现代 JavaScript 框架（如 React、vue、angular）来管理 HTML 代码，这样可以提高代码的可维护性和可读性。
- 考虑对 cartData 进行错误处理，例如，如果 cartData 为空，则显示一个空购物车的提示信息。
总结
通过修改 HTML 赋值方式，可以解决 JavaScript 购物车中只显示最后一个商品的问题。为了提高性能，建议采用一次性渲染的方式，避免频繁修改 innerHTML 属性。在实际项目中，可以结合模板引擎或现代 JavaScript 框架，构建更健壮、可维护的购物车功能。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
