如何通过onClick事件触发显示Total？前端实现问题求助

嘿，我完全懂你的困扰——本来想让Total只在用户点击CHECKOUT按钮时才现身，结果现在只要动一下商品数量输入框就自动计算显示了，对吧？咱们来调整代码逻辑就能搞定这个问题，步骤很清晰：

核心思路 #

把自动计算并显示Total的逻辑拆成两部分：

1. 封装一个计算Total的独立函数（保留你原来的计算逻辑）
2. 移除输入框事件里的显示操作，把触发计算和显示的时机改成CHECKOUT按钮的点击事件
3. 初始状态下把Total区域隐藏起来，点击后再显示

修改后的代码示例 #

假设你的Total显示区域是这样的（先加个隐藏样式）：

<!-- 初始隐藏Total区域 -->
<div id="total-container" style="display: none;">
  Total: <span id="total-value"></span>
</div>
<!-- CHECKOUT按钮 -->
<button id="checkout-btn">CHECKOUT</button>

然后调整JavaScript代码：

$(document).ready(function() {
  // 第一步：封装计算Total的函数，保留你原来的计算逻辑
  function getTotal() {
    var product_quantity = 0;
    var product_price = 0;
    // --- 这里放你原来的计算逻辑，比如遍历商品、累加数量和价格 ---
    // 举个例子：
    $(".product_qty").each(function() {
      product_quantity += parseInt($(this).val()) || 0;
      // 假设每个输入框对应的价格存在相邻元素里，比如.data('price')
      product_price += parseFloat($(this).closest('.product-item').data('price')) || 0;
    });
    var total = product_quantity * product_price; // 根据你的实际逻辑调整
    return total;
  }

  // 第二步：给CHECKOUT按钮绑定点击事件
  $(document).on("click", "#checkout-btn", function() {
    // 计算Total
    var finalTotal = getTotal();
    // 把结果渲染到页面
    $("#total-value").text("$" + finalTotal.toFixed(2));
    // 显示Total区域
    $("#total-container").show();
  });

  // 第三步：移除原来输入框的自动显示逻辑（把下面这段注释或删掉）
  // $(document).on("input paste keyup", ".product_qty", function(event) {
  //   // 原来的自动计算显示代码
  // });
});

额外注意点 #

• 确保CHECKOUT按钮的选择器（比如#checkout-btn）和你实际HTML里的按钮匹配
• 如果需要用户修改数量后，再次点击CHECKOUT能更新Total，这个逻辑已经自动支持了——每次点击都会重新调用getTotal()获取最新值
• 初始隐藏Total区域也可以用CSS类（比如.hidden { display: none; }）代替内联样式，这样更规范

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