jQuery实现点击按钮向cart div添加/移除投注选单功能

算力阿峰

2026-8-28

投注赔率按钮交互实现方案

原有代码问题

初始编写的代码存在几个明显问题，无法匹配需求：

没有正确提取赛事名称、投注类型、赔率三个核心字段，仅错误获取了按钮自身的值
没有做选中状态判断，无法实现点击取消、移除对应投注项的逻辑
重复向页面插入id为cart的元素，违反了id全局唯一的HTML规范
没有给投注项设置唯一匹配标识，无法定位要删除的对应条目

前置HTML适配要求

先给表格元素补几个标识属性，方便JS读取数据：

每行赛事存放对阵双方名称的单元格，添加classmatch-name
三个赔率按钮（class为nr）分别添加data-bet-type属性：主胜按钮值为Home、平局按钮值为Draw、客胜按钮值为Away
可提前给选中状态的按钮写.active样式，比如修改背景色、文字颜色，给用户明确选中反馈

完整实现代码

$(".nr").click(function() {
  const $currentBtn = $(this);
  // 获取当前行的赛事信息
  const $row = $currentBtn.closest("tr");
  const matchName = $row.find(".match-name").text().trim();
  const betType = $currentBtn.data("bet-type");
  const oddVal = $currentBtn.text().trim();
  // 生成投注项唯一标识，用于匹配删除
  const itemUniqueKey = `${matchName}_${betType}`;

  if ($currentBtn.hasClass("active")) {
    // 取消选中逻辑：移除按钮选中态，删除对应投注项
    $currentBtn.removeClass("active");
    $(`#cart .cart-item[data-key="${itemUniqueKey}"]`).remove();
  } else {
    // 选中逻辑：添加按钮选中态，拼接投注项插入cart容器
    $currentBtn.addClass("active");
    const betItem = `
      <div class="cart-item" data-key="${itemUniqueKey}">
        <p>${matchName}</p>
        <p>${betType}</p>
        <p>${oddVal}</p>
      </div>
    `;
    $("#cart").append(betItem);
  }
});