JavaScript中点击赛事结果按钮时如何重置球队积分数据

核心问题 #

当前点击比赛结果按钮（主队胜/平/客队胜）时，每次点击都会直接累加球队数据，没有实现「再次点击重置回操作前状态」的逻辑——因为没有保存操作前的球队状态，也没有标记按钮的点击状态，导致重复触发时持续执行累加逻辑。

解决方案思路 #

要实现点击切换「应用结果/重置状态」，需要做两件核心事：

1. 保存操作快照：每次首次点击按钮前，记录对应两队的当前数据状态，用于后续回滚
2. 标记按钮状态：给每个按钮添加激活标记，判断当前点击是要应用结果还是回滚

具体代码修改 #

1. 备份状态与存储快照 #

先深拷贝初始球队数据，同时创建对象存储单场比赛的操作前状态：

// 深拷贝初始球队数据，作为全局备份（如需重置所有状态可用）
const initialTeams = JSON.parse(JSON.stringify(teams));
// 用比赛ID作为键，存储单场比赛操作前的两队状态
const matchActionStates = {};

2. 修改点击事件逻辑 #

调整按钮的点击处理函数，加入状态判断与快照保存/恢复逻辑：

// 处理比赛结果点击的函数，接收比赛ID和结果类型（homeWin/draw/awayWin）
function toggleMatchResult(matchId, resultType) {
  const btn = event.target;
  const isActive = btn.dataset.active === 'true';

  if (isActive) {
    // 再次点击：回滚到操作前状态
    const prevState = matchActionStates[matchId];
    if (!prevState) return;

    // 找到对应主队和客队，恢复数据
    const homeTeam = teams.find(t => t.name === prevState.home.name);
    const awayTeam = teams.find(t => t.name === prevState.away.name);

    Object.assign(homeTeam, prevState.home);
    Object.assign(awayTeam, prevState.away);

    // 清除状态记录与按钮标记
    delete matchActionStates[matchId];
    btn.dataset.active = 'false';
  } else {
    // 首次点击：保存当前状态，应用结果
    const match = matches.find(m => m.id === matchId);
    const homeTeam = teams.find(t => t.name === match.homeTeam);
    const awayTeam = teams.find(t => t.name === match.awayTeam);

    // 保存当前状态快照
    matchActionStates[matchId] = {
      home: {...homeTeam},
      away: {...awayTeam}
    };

    // 执行对应的积分统计函数
    switch(resultType) {
      case 'homeWin':
        handleHomeWin(match.homeTeam, match.awayTeam);
        break;
      case 'draw':
        handleDraw(match.homeTeam, match.awayTeam);
        break;
      case 'awayWin':
        handleAwayWin(match.homeTeam, match.awayTeam);
        break;
    }

    // 标记按钮为已激活
    btn.dataset.active = 'true';
  }

  // 更新球队表格的渲染
  renderTeamsTable();
}

3. 按钮初始化添加状态标记 #

在创建matches表格的按钮元素时，给每个按钮加上data-active="false"属性：

<!-- 示例按钮结构 -->
<button data-active="false" onclick="toggleMatchResult(1, 'homeWin')">主队获胜</button>

逻辑说明 #

• 首次点击按钮时，先把当前两队的积分、场次等数据快照存入matchActionStates，再执行对应的统计函数更新数据，最后标记按钮为已激活
• 再次点击时，从快照中取出之前的状态，覆盖当前球队数据，清除快照记录并重置按钮状态，实现「回滚」效果
• 用Object.assign和对象展开运算符{...obj}做浅拷贝，确保快照数据不随后续修改变化

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