JavaScript实现将结算HTML区块仅追加到列表最后一项

你现在的代码把结算区块的渲染逻辑写在了「加入购物车」按钮的点击回调里，每添加一个商品就会往购物车容器里追加一次结算块，导致结算块重复生成、插在商品列表中间，无法固定在所有商品末尾。 #

第一步：把结算区块改为静态固定在购物车容器末尾 #

不要在JS里动态拼接结算块的HTML，直接把结算块写在静态HTML的购物车容器最底部，默认设置为隐藏，购物车有商品时再显示：

<h2>Shopping bag</h2>
<div class="shooping-cart">
  <!-- 原有动态渲染购物车商品的位置保持不变 -->
  <!-- 结算块固定放在容器最末尾 -->
  <div class="totalKosara" style="display: none;">
    <div class="potvrdi">
      <p class="sub">Subtotal</p>
      <p class="price">0 KN</p>
    </div>
    <div class="text">
      <p>Shipping, taxes and discounts calculated at checkout.</p>
    </div>
    <div class="blue"><button>Checkout</button></div>
  </div>
</div>

第二步：删除JS里重复追加结算块的冗余代码 #

找到加入购物车点击事件里的如下代码段，整段删除：

const basketTotal = `
<div class="totalKosara">
  <div class="potvrdi">
    <p class="sub">Subtotal</p>
    <p class="price">675 KN</p>
  </div>
  <div class="text">
    <p>Shipping, taxes and discounts calculated at checkout.</p>
  </div>
  <div class="blue"><button>Checkout</button></div>
</div>
`;
shoopingCart.innerHTML += basketTotal;

第三步：封装统一的购物车总价更新函数 #

在JS全局作用域（和main、shoopingCart变量同级位置）写一个复用函数，专门负责控制结算块显示/隐藏、计算所有商品总价：

function updateCartTotal() {
  const totalBlock = document.querySelector('.totalKosara');
  const cartItems = document.querySelectorAll('.single-item');
  // 购物车为空时隐藏结算块
  if (cartItems.length === 0) {
    totalBlock.style.display = 'none';
    return;
  }
  // 有商品时显示结算块
  totalBlock.style.display = 'flex';
  let totalPrice = 0;
  // 遍历所有商品行，累加单行总价
  cartItems.forEach(item => {
    const priceEl = item.querySelector('.single-total');
    const priceVal = Number(priceEl.innerText.split(' ')[0]);
    totalPrice += priceVal;
  });
  // 更新结算区总价显示
  totalBlock.querySelector('.price').innerText = `${totalPrice} KN`;
}

第四步：在所有会修改购物车内容的节点调用更新函数 #

• 追加完新的购物车商品singleItem后，调用updateCartTotal()
• 删除商品的点击逻辑中，移除商品元素后，调用updateCartTotal()
• 点击加号修改商品数量、更新完单行商品总价后，调用updateCartTotal()
• 点击减号修改商品数量、更新完单行商品总价后，调用updateCartTotal()

• 你当前每次点击加入购物车时，都会给所有已存在的删除、加号、减号按钮重复绑定事件，会导致点击一次触发多次逻辑。建议把这三个按钮的事件绑定改成事件委托写法，直接绑定在shoopingCart容器上，不用每次添加商品都重新查询DOM绑定事件，减少性能损耗和逻辑bug。
• 代码中存在拼写错误：Shooping正确拼写为Shopping，不影响当前运行，但后续维护时容易因为拼写不一致出现选择器匹配失败的问题，建议修正。

内容的提问来源于stack exchange，提问作者avuji31