如何让购物车结算总价模块仅显示在最后一个商品项下方

结算模块重复出现是因为你把结算模块的HTML拼接逻辑写在了「加入购物车」的点击回调里，每点击一次加购按钮，就会往购物车容器里插入一次结算模块，最终导致每加一个商品就多一块结算区域。

1. 调整HTML结构，固定结算模块位置 #

把结算模块的DOM直接写死在购物车容器的后面，全局只保留一份，不要在JS里动态重复生成：

<h2>Shopping bag</h2>
<div class="shooping-cart"></div>
<!-- 全局唯一的结算模块，固定在购物车列表下方 -->
<div class="totalKosara vidljivo" id="basketTotal">
  <div class="potvrdi">
    <p class="sub">Subtotal</p>
    <p class="price" id="totalPrice">0 KN</p>
  </div>
  <div class="text">
    <p>Shipping, taxes and discounts calculated at checkout.</p>
  </div>
  <div class="blue"><button id="checkoutBtn">Checkout</button></div>
</div>

因为你给.totalKosara写了float: right样式，放在购物车容器后就会固定展示在所有商品项的最下方，不会插入到商品列表中间。

2. 清理JS里的冗余代码 #

找到加购点击回调里定义basketTotal字符串的整段代码，全部删除，不要在加购逻辑里动态插入结算模块。

3. 抽离总价更新逻辑 #

在JS全局作用域定义一个统一的总价计算函数，每次购物车内容变动时调用即可，不用重复生成DOM：

function updateTotalPrice() {
  let total = 0;
  // 遍历所有商品单行的价格，累加总价
  document.querySelectorAll('.single-total').forEach(item => {
    total += Number(item.textContent.trim().split(' ')[0]);
  });
  // 更新结算模块的总价显示
  document.querySelector('#totalPrice').textContent = `${total} KN`;
}

4. 在购物车变动节点触发总价更新 #

在所有会修改购物车商品、数量的逻辑末尾，调用上面的updateTotalPrice()函数：

• 新增商品到购物车，插入完.single-item节点后调用
• 删除商品，移除对应.single-item节点后调用
• 点击加号修改商品数量，更新完单行价格后调用
• 点击减号修改商品数量，更新完单行价格后调用

你现在每次新增商品后，都会用querySelectorAll选中所有的删除、加减按钮重新绑定事件，会导致旧元素重复绑定事件触发多次。正确做法是新增单个商品节点后，只给当前新节点内部的按钮绑定事件即可，不用全量遍历重绑。

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