本文旨在解决 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 = ` @@##@@ ${cartData[i][0]} DZD ${cartData[i][1]} DZD ${cartData[i][1]} `; 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 = ` @@##@@ ${cartData[i][0]} DZD ${cartData[i][1]} DZD ${cartData[i][1]} `; 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 框架，构建更健壮、可维护的购物车功能。
以上就是正确显示购物车中所有商品：JavaScript 购物车渲染优化教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512950.html
微信扫一扫 
支付宝扫一扫 
