移除购物车商品后实现总价自动更新的技术方案求助

核心问题 #

当前代码删除商品时仅移除了页面元素，但未更新subtotal变量，也没有重新计算并渲染总价，导致删除后总价无变化。只需在删除操作中同步更新数据并重新渲染总价区域即可解决。

具体修改方案 #

1. 抽离总价渲染逻辑：把添加商品时的总价渲染代码封装成独立函数，方便添加和删除操作复用。
2. 更新删除函数：删除商品时获取对应价格，从subtotal中扣除，再调用渲染函数更新总价。
3. 修复代码细节：
   • 修正toFixed(2.3)的参数错误（该方法仅接受0-20的整数，改为toFixed(2)）
   • 删除按钮避免重复id，改用class
   • 修正HTML字符串中的转义字符（</>替换为</>）

修改后的完整代码 #

JavaScript部分

let subtotal = 0;

// 统一渲染总价的函数
function renderCartTotal() {
  const formattedSubtotal = subtotal.toFixed(2);
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = calculateTotal(subtotal);

  $('.cart-math').html(`
    <p class="cart-math-item">
      <span class="cart-math-header">Subtotal:</span>
      <span class="g-price subtotal">
        <br>
        £${formattedSubtotal}
      </span>
    </p>
    <p class="cart-math-item">
      <span class="cart-math-header">Service Charge(12%):</span>
      <span class="g-price tax">£${serviceCharge}</span>
    </p>
    <p class="cart-math-item">
      <span class="cart-math-header">Total:</span>
      <span class="g-price total">£${total}</span>
    </p>
  `);
}

function Delete(currentEl) {
  // 从父元素获取商品价格（推荐用data属性存储，更稳定）
  const itemPrice = parseFloat(currentEl.parentNode.dataset.price);
  // 更新小计
  subtotal = subtotal - itemPrice;
  // 移除页面元素
  currentEl.parentNode.remove();
  // 重新渲染总价
  renderCartTotal();
}

const calculateserviceCharge = subtotal => {
  const serviceCharge = subtotal * .12;
  const formattedserviceCharge = serviceCharge.toFixed(2);
  return formattedserviceCharge;
};

const calculateTotal = subtotal => {
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = parseFloat(subtotal) + parseFloat(serviceCharge);
  const formattedTotal = total.toFixed(2);

  return formattedTotal;
};

$('.btn').on('click', function() {
  const title = $(this).data('title');
  const price = $(this).data('price');

  // 生成购物车项时添加data-price属性，方便删除时获取价格
  const element = `
    <p class="cart-item-heading" data-price="${price}">${title} £${price} <button class="delete-btn" onclick="Delete(this);">X</button></p>
  `;

  $('.cart-items').append(element);

  subtotal = subtotal + price;
  // 调用渲染函数更新总价
  renderCartTotal();
});

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='hide-3' id="hide" style="background-color: #edb90f">Close</button>
<div class="mains" id="subject">
  <div id="cart-items" class="screen-cart">
    <h2>Your Order</h2>
    <ul class="cart-items" id="cart-items"></ul>
    <div class="cart-math" id="cart-math"></div>
  </div>
  <button class="btn" style="background-color: #edb90f" data-title="Duck" data-price="21.95">Duck</button>
  <button class="btn" style="background-color: #edb90f" data-title="Chicken" data-price="18.95">Chicken</button>
  <button class="btn" style="background-color: #edb90f" data-title="Salmon Fillet" data-price="19.95">Salmon Fillet</button>
  <button class="btn" style="background-color: #edb90f" data-title="Orzotto" data-price="12.95">Orzotto</button>
  <button class="btn" style="background-color: #edb90f" data-title="Vegan Burger" data-price="15.45">Vegan Burger</button>
  <button class="btn" style="background-color: #edb90f" data-title="Sea Bass" data-price="16.95">Sea Bass</button>
  <button class="btn" style="background-color: #edb90f" data-title="Classic Burger" data-price="15.45">Classic Burger</button>
  <button class="btn" style="background-color: #edb90f" data-title="Tuna" data-price="22.95">Tuna</button>
  <button class="btn" style="background-color: #edb90f" data-title="Whole Sea Bream" data-price="49.95">Whole Sea Bream</button>
</div>
</dialog>

补充说明 #

用data-price属性存储商品价格比正则匹配更稳定，避免因文本格式变化导致价格获取失败。修改后的代码在添加和删除商品时都会同步更新小计、服务费和总价，完全满足需求。

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