javascript 如何使代码显示购物车中cartData中保存的所有产品，而不仅仅是最后一个产品？

yptwkmov 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(113)

我认为解决方案可以修改最后一行cartItems.innerHTML = cartHTML，以根据cartData中产品的数量（基于其长度）增加循环的可重复性。有谁能帮我这个忙吗？

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>`;
                    //console.log(i)
                    **cartItems.innerHTML = cartHTML**
}

线cartItems.innerHTML = cartHTML必须根据cartData中的产品数量（基于其长度）增加循环的可重复性。

JavaScript

来源：https://stackoverflow.com/questions/76254087/how-to-make-the-code-display-all-the-products-saved-in-cartdata-in-the-shopping

1条答案

按热度按时间

icnyk63a1#

在循环的每次迭代中，您都在重写cartItems innerHTML，而不是向其添加内容。
而不是这样做：
cartItems.innerHTML = cartHTML
你应该这样做：
cartItems.innerHTML = cartItems.innerHTML + cartHTML
你可以重写为：
cartItems.innerHTML += cartHTML
仍然要注意，最好是完整地创建表的HTML，并一次性将其追加到页面。为什么呢？因为每次你在页面上添加新的内容时，你都会迫使浏览器进行一系列“昂贵”的计算，以知道如何用你给它的新内容重新呈现页面。
比如说

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

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 如何使代码显示购物车中cartData中保存的所有产品，而不仅仅是最后一个产品？

1条答案

相关问题

热门标签

最新问答