javascript - 更改具有相同 onclick 类的多个 div 中的文本

Question

我有一份足球比赛列表，想用“?-?”替换所有比分当按下按钮时，再次按下按钮时切换回显示分数。

div {
  display: table;
}

div div {
  display: table-row;
}

div div div {
  display: table-cell;
}

.score {
  color: blue;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hide scores!</button>
<br>  <br>
<div class="table">

  <div class="match">
    <div class="team1">Manchester United</div>
    <div class="score">1-1</div>
    <div class="team2">Liverpool</div>
  </div>

  <div class="match">
    <div class="team1">Juventus</div>
    <div class="score">2-0</div>
    <div class="team2">Inter Milan</div>
  </div>

  <div class="match">
    <div class="team1">Real Madrid</div>
    <div class="score">1-4</div>
    <div class="team2">Barcelona</div>
  </div>

  <div class="match">
    <div class="team1">Dortmund</div>
    <div class="score">3-0</div>
    <div class="team2">Bayern Munich</div>
  </div>

  <div class="match">
    <div class="team1">PSG</div>
    <div class="score">0-1</div>
    <div class="team2">Marseille</div>
  </div>

</div>

我已经尝试过 getElementById 和 innerHTML，但由于匹配项数量较多，我更愿意使用 getElementsByClassName。我见过有人为此推荐 querySelectorAll()，但我无法让脚本工作。

另一种方法是运行一个脚本，用同一类的 div 内的问号替换所有数字。

请使用 this fiddle 帮助我

Answer 1

这是一个使用 querySelector 的解决方案只需选择 button和 .table元素来切换类。

剩下的都是CSS，所以不需要循环。

请注意，这会交换您的 .score data-score 的文本内容属性。

document.querySelector("button")
  .addEventListener("click", function() {
    document.querySelector("div.table").classList.toggle("hide-score");
  });

.table .score:after {
  content: attr(data-score);
}

.table.hide-score .score:after {
  content: "?-?";
}

<button>Hide scores!</button>

<br>
<br>

<div class="table">

  <div class="match">
    <div class="team1">Manchester United</div>
    <div class="score" data-score="1-1"></div>
    <div class="team2">Liverpool</div>
  </div>

  <div class="match">
    <div class="team1">Juventus</div>
    <div class="score" data-score="2-0"></div>
    <div class="team2">Inter Milan</div>
  </div>

  <div class="match">
    <div class="team1">Real Madrid</div>
    <div class="score" data-score="1-4"></div>
    <div class="team2">Barcelona</div>
  </div>

  <div class="match">
    <div class="team1">Dortmund</div>
    <div class="score" data-score="3-0"></div>
    <div class="team2">Bayern Munich</div>
  </div>

  <div class="match">
    <div class="team1">PSG</div>
    <div class="score" data-score="0-1"></div>
    <div class="team2">Marseille</div>
  </div>

</div>

为了支持旧版浏览器，您可以将分数保留为文本内容，但将其放在 span 中与另一个<span>?-?</span>在它旁边，然后配置 CSS 以隐藏 :first-child并根据需要显示其余部分。