如何在购物车中显示所有商品，而不仅仅是最后一个？-js教程-PHP中文网

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

心靈之曲

发布： 2025-07-31 20:04:12

原创

496人浏览过

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

第一段引用上面的摘要：

本文旨在解决购物车中仅显示最后一个商品的问题。通过分析问题代码，我们发现循环中每次都覆盖了 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 = `
    <tr class="cart-row">
        <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
        <td><img src="${cartData[i][2]}" alt=""></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;
}

登录后复制

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

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

查看详情

解决方案二：构建完整的 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 = `
        <tr class="cart-row">
            <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
            <td><img src="${cartData[i][2]}" alt=""></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 中。循环结束后，我们使用 cartItems.innerHTML = cartRows 语句，一次性更新 cartItems.innerHTML。这种方法只触发一次重绘和重排，因此性能更高。