正确显示购物车中所有商品：JavaScript 购物车渲染优化教程-js教程-PHP中文网

正确显示购物车中所有商品：JavaScript 购物车渲染优化教程

碧海醫心

发布： 2025-07-31 20:24:22

原创

691人浏览过

正确显示购物车中所有商品：javascript 购物车渲染优化教程

本文旨在解决 JavaScript 购物车中仅显示最后一个商品的问题。通过修改循环内的 HTML 赋值方式，避免每次循环覆盖之前的商品信息。同时，提供更高效的购物车渲染方法，一次性构建完整的 HTML 字符串，减少浏览器重绘次数，提升用户体验。

在 JavaScript 购物车实现中，经常会遇到只显示购物车中最后一个商品的问题。这通常是由于在循环中错误地覆盖了 innerHTML 属性导致的。以下将详细介绍如何解决这个问题，并提供一种更高效的购物车渲染方法。

问题分析

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

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

解决方案：累加 HTML 字符串

最直接的解决方案是使用 += 运算符，将新的 HTML 字符串累加到 cartItems.innerHTML 中。这样，每次循环都会将新的商品信息添加到现有内容之后，从而显示所有商品。

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

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

登录后复制

更优方案：一次性渲染

虽然上述解决方案可以解决问题，但效率不高。每次修改 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><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 代码。
在循环中，将每个商品的 HTML 代码添加到 cartRows 中。
循环结束后，将完整的 cartRows 字符串赋值给 cartItems.innerHTML。

注意事项

确保 cartItems 元素在 HTML 中已经存在，并且是正确的容器。
在实际项目中，建议使用模板引擎（如 Handlebars、Mustache）或现代 JavaScript 框架（如 React、Vue、Angular）来管理 HTML 代码，这样可以提高代码的可维护性和可读性。
考虑对 cartData 进行错误处理，例如，如果 cartData 为空，则显示一个空购物车的提示信息。

总结

通过修改 HTML 赋值方式，可以解决 JavaScript 购物车中只显示最后一个商品的问题。为了提高性能，建议采用一次性渲染的方式，避免频繁修改 innerHTML 属性。在实际项目中，可以结合模板引擎或现代 JavaScript 框架，构建更健壮、可维护的购物车功能。

以上就是正确显示购物车中所有商品：JavaScript 购物车渲染优化教程的详细内容，更多请关注php中文网其它相关文章！