if-else块行为异常排查：桌游工具网页技能显示问题

• 核心问题原因：你在Functions.basicMoves.displayBasicMove的if-else逻辑里，仅针对当前选中的技能做了显示/隐藏判断，但切换新技能时，没有主动清除之前已显示的其他技能描述，导致新旧描述叠加显示。

• 具体修复思路：

  1. 全局重置法：在处理当前选中技能的显示逻辑前，先隐藏所有已存在的技能描述元素，再渲染当前选中的内容。
  2. 状态跟踪法：维护一个变量记录当前正在显示的技能描述元素，每次切换时先检查该变量，若存在且不是当前目标元素，就将其隐藏，再更新状态。

• 代码调整示例：
  假设你的技能描述元素有统一类名.move-description，可以在if-else块前加入以下代码：

  // 先隐藏所有已显示的技能描述
  document.querySelectorAll('.move-description').forEach(el => {
    el.style.display = 'none';
  });
  

  如果用状态跟踪的方式（更高效）：

  // 在Functions对象作用域内或全局维护当前激活元素
  let currentActiveMove = null;
  
  Functions.basicMoves.displayBasicMove = function(selectedMoveId) {
    // 获取当前选中技能对应的描述元素
    const targetElement = document.getElementById(`move-${selectedMoveId}`);
    
    // 处理旧的激活元素
    if (currentActiveMove && currentActiveMove !== targetElement) {
      currentActiveMove.style.display = 'none';
    }
  
    // 处理当前元素的显示/隐藏
    if (targetElement.style.display === 'block') {
      targetElement.style.display = 'none';
      currentActiveMove = null;
    } else {
      targetElement.style.display = 'block';
      currentActiveMove = targetElement;
    }
  }
  

• 优化建议：推荐用CSS类控制显示隐藏，而非直接操作样式，代码更易维护：

  .move-description { display: none; }
  .move-description.active { display: block; }
  

  脚本中只需添加/移除active类：

  // 替换样式操作的代码
  if (targetElement.classList.contains('active')) {
    targetElement.classList.remove('active');
    currentActiveMove = null;
  } else {
    // 先移除其他元素的active类
    document.querySelector('.move-description.active')?.classList.remove('active');
    targetElement.classList.add('active');
    currentActiveMove = targetElement;
  }
  

内容的提问来源于stack exchange，提问作者The Jaded George