如何修改jQuery计算逻辑，移除投注项后让总赔率与派彩归零？

问题分析 #

移除投注车最后一项后，总赔率（Total Odds）和派彩金额（Payout Amount）未重置为0，核心原因是当前计算逻辑未判断投注车是否为空，且移除操作后未触发正确的状态更新流程。

代码修改方案 #

以下是适配需求的jQuery代码调整（结合场景逻辑）：

// 初始化全局变量
let totalOdds = 0;
let payoutAmount = 0;

$(document).ready(function() {
  // 绑定9.00按钮点击事件
  $('.btn-9').click(function() {
    const $cart = $('#cart');
    const $betTemplate = $('.bet-item-9');
    const $existingItem = $cart.find('.bet-item-9');

    if ($existingItem.length > 0) {
      // 移除已存在的投注项
      $existingItem.remove();
    } else {
      // 克隆模板并添加到投注车
      $cart.append($betTemplate.clone().show());
    }

    // 触发计算更新
    updateBetCalculations();
  });

  // 核心计算函数，增加空状态判断
  function updateBetCalculations() {
    const $cartItems = $('#cart').children();

    // 判断投注车是否为空
    if ($cartItems.length === 0) {
      totalOdds = 0;
      payoutAmount = 0;
    } else {
      // 这里替换为你的实际计算逻辑，示例为单一项的赔率值
      totalOdds = 9.00;
      // 派彩金额示例：总赔率 × 投注额（假设投注额为10）
      payoutAmount = totalOdds * 10;
    }

    // 更新页面显示
    $('#total-odds').text(totalOdds.toFixed(2));
    $('#payout-amount').text(payoutAmount.toFixed(2));
  }

  // 页面加载时初始化显示
  updateBetCalculations();
});

关键修改点： #

• 在updateBetCalculations函数中，先检查投注车子元素数量，为空则直接重置两个值为0
• 按钮点击完成添加/移除操作后，强制调用计算函数同步状态
• 页面加载时主动调用计算函数，确保初始显示为0

对应HTML结构示例 #

<!-- 投注按钮 -->
<button class="btn-9">9.00</button>

<!-- 投注项模板（默认隐藏，仅作克隆源） -->
<div class="bet-item-9" style="display: none;">
  <p>赔率9.00的投注项</p>
</div>

<!-- 投注车容器 -->
<div id="cart"></div>

<!-- 结果显示区域 -->
<div class="result-display">
  <p>总赔率：<span id="total-odds">0.00</span></p>
  <p>派彩金额：<span id="payout-amount">0.00</span></p>
</div>

额外注意事项： #

• 如果支持多投注项，需遍历#cart内所有元素重新计算赔率（比如相乘/累加），示例中仅适配单一场景，需根据实际业务调整计算逻辑
• 克隆投注项时要确保操作的是模板副本，避免误删原始模板

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