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

第一段引用上面的摘要：

本文旨在解决购物车中仅显示最后一个商品的问题。通过分析问题代码，我们发现循环中每次都覆盖了 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 = `
    
        
        @@##@@
        ${cartData[i][0]}
        DZD ${cartData[i][1]}
        
        DZD ${cartData[i][1]}
    `;

    cartItems.innerHTML += cartHTML;
}

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

动感购物HTML

修正了V1.10的一些BUG感购物HTML系统是集合目前网络所有购物系统为参考而开发，代码采用DIV编号，不管从速度还是安全我们都努力做到最好，此版虽为免费版但是功能齐全，无任何错误，特点有：专业的、全面的电子商务解决方案，使您可以轻松实现网上销售；自助式开放性的数据平台，为您提供充满个性化的设计空间；功能全面、操作简单的远程管理系统，让您在家中也可实现正常销售管理；严谨实用的全新商品数据库，便于

下载

解决方案二：构建完整的 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 = `
        
            
            @@##@@
            ${cartData[i][0]}
            DZD ${cartData[i][1]}
            
            DZD ${cartData[i][1]}
        `;

    cartRows += cartRow;
}

cartItems.innerHTML = cartRows;

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

总结

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