解决购物车只显示最后一个商品的问题：JavaScript 教程-js教程-PHP中文网

解决购物车只显示最后一个商品的问题：JavaScript 教程

霞舞

发布： 2025-07-31 20:02:25

原创

505人浏览过

解决购物车只显示最后一个商品的问题：javascript 教程

第一段引用上面的摘要：

本文旨在解决购物车中只显示最后一个商品的问题。通过分析问题代码，我们将探讨如何正确地将所有商品信息添加到购物车HTML中。文章提供了两种解决方案：一种是累加HTML字符串，另一种是先构建完整的HTML字符串，然后一次性更新购物车内容，后者性能更优。我们将详细讲解代码实现，并强调性能优化的重要性。

在开发购物车功能时，一个常见的问题是循环遍历购物车数据，并将每个商品的信息添加到HTML中。然而，如果实现不当，可能会导致购物车只显示最后一个商品，而之前的商品信息被覆盖。本文将详细介绍如何避免这个问题，并提供两种有效的解决方案。

问题分析

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

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

解决方案一：累加 HTML 字符串

最直接的解决方案是，在每次循环迭代时，将新的 HTML 代码追加到 cartItems 的现有内容中。这可以通过使用 += 运算符来实现。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

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;
}

登录后复制

这段代码会将每个商品的 HTML 代码追加到 cartItems 中，从而确保所有商品都显示在购物车中。

解决方案二：构建完整的 HTML 字符串

虽然上述解决方案能够解决问题，但效率并不高。每次修改 innerHTML 都会触发浏览器的重新渲染，这在循环中会产生大量的性能开销。一个更优的方案是，先构建包含所有商品信息的完整 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 中。循环结束后，cartRows 包含了所有商品信息的完整 HTML 代码。最后，使用 cartItems.innerHTML = cartRows 一次性更新 cartItems 的内容。