点击按钮切换同class多div文本：实现足球比分显示与隐藏

我来帮你搞定这个比分切换的需求，你提到的getElementsByClassName和querySelectorAll都能实现，这里我用更灵活的querySelectorAll来写方案，同时解决原始比分保存的核心问题——毕竟切换回来得能恢复真实数据对吧？

核心思路 #

1. 用一个状态变量跟踪当前是显示真实比分还是隐藏状态
2. 给每个.score元素的自定义属性（dataset）保存原始比分，避免切换时丢失数据
3. 点击按钮时切换状态，根据状态更新所有比分元素的内容

完整代码示例 #

HTML结构（假设你的赛事列表是这样的）

<button id="toggleScoreBtn">切换比分显示</button>

<!-- 赛事比分元素 -->
<div class="match">
  <div class="team">A队</div>
  <div class="score">2-1</div>
  <div class="team">B队</div>
</div>
<div class="match">
  <div class="team">C队</div>
  <div class="score">0-0</div>
  <div class="team">D队</div>
</div>

JavaScript代码

// 获取切换按钮
const toggleBtn = document.getElementById('toggleScoreBtn');
// 获取所有比分元素（querySelectorAll支持更灵活的选择器）
const scoreElements = document.querySelectorAll('.score');
// 状态变量：标记当前是否隐藏了真实比分
let isScoreHidden = false;

// 绑定按钮点击事件
toggleBtn.addEventListener('click', () => {
  // 切换状态
  isScoreHidden = !isScoreHidden;

  // 遍历所有比分元素更新内容
  scoreElements.forEach(scoreEl => {
    if (isScoreHidden) {
      // 第一步：把原始比分存到元素的dataset属性里
      scoreEl.dataset.originalScore = scoreEl.textContent;
      // 第二步：替换成占位符
      scoreEl.textContent = '?-?';
    } else {
      // 从dataset里取出原始比分恢复显示
      scoreEl.textContent = scoreEl.dataset.originalScore;
    }
  });
});

关键细节说明 #

• 为什么用dataset保存原始比分？：每个比分元素独立存储自己的原始值，比用全局数组存储更可靠，哪怕后续新增/删除赛事元素也不会出错。
• querySelectorAll vs getElementsByClassName：
  • querySelectorAll('.score')返回静态NodeList，DOM变化后不会自动更新，适合元素固定的场景；
  • 如果要用getElementsByClassName，只需要把scoreElements的获取改成document.getElementsByClassName('score')，然后遍历的时候转成数组（Array.from(scoreElements).forEach(...)），因为它返回的是动态HTMLCollection，直接遍历可能有意外。
• 兼容性：现代浏览器都支持querySelectorAll和dataset，如果要兼容IE11，只需要把forEach改成普通的for循环即可。

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