JavaScript函数本地化：实现按钮对应答案的显示/隐藏（无需ID）

嘿，我懂你现在的困扰——不管点哪个"Show/Hide Answer"按钮，都只会影响第一个答案，对吧？这是因为你当前的函数里一直固定取了document.getElementsByClassName("answer")[0]，也就是页面中第一个带answer类的元素，自然所有按钮都只会操作它。

要实现每个按钮只控制自己对应的答案，咱们不用给每个元素加ID，利用DOM的层级关系就能搞定，下面是具体的修改方案：

第一步：优化HTML结构（可选但更健壮） #

先把每个问答组包裹在一个容器里，这样后续找对应元素会更清晰，避免结构变动导致出错：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book Title</title>
  <script>
    // 后面写修改后的函数
  </script>
  <style>
    /* 默认把答案设为白色，初始隐藏 */
    .answer {
      color: white;
    }
  </style>
</head>
<body>
  <h3> Flashcards </h3>

  <!-- 第一个问答组 -->
  <div class="flashcard">
    <p class="question"> This is the First Question </p>
    <div class="answer">
      <p> This is the First Answer </p>
    </div>
    <div>
      <label>Check Answer:</label>
      <button onclick="showFunction(this)">Show Answer</button>
      <button onclick="hideFunction(this)">Hide Answer</button>
    </div>
  </div>

  <!-- 第二个问答组 -->
  <div class="flashcard">
    <p class="question"> This is the Second Question </p>
    <p class="answer"> This is the Second Answer </p>
    <br />
    <div>
      <label>Check Answer:</label>
      <button onclick="showFunction(this)">Show Answer</button>
      <button onclick="hideFunction(this)">Hide Answer</button>
    </div>
  </div>

  <!-- 第三个问答组 -->
  <div class="flashcard">
    <p class="question"> This is the Third Question </p>
    <p class="answer"> This is the Third Answer </p>
    <br />
    <div>
      <label>Check Answer:</label>
      <button onclick="showFunction(this)">Show Answer</button>
      <button onclick="hideFunction(this)">Hide Answer</button>
    </div>
  </div>
</body>
</html>

第二步：修改JavaScript函数 #

把按钮的引用（this）传给函数，然后通过这个按钮找到它所在的问答容器，再定位到对应的答案元素：

function showFunction(btn) {
  // 找到当前按钮所在的最近的.flashcard容器
  const currentCard = btn.closest('.flashcard');
  // 在这个容器里找到对应的.answer元素
  const targetAnswer = currentCard.querySelector('.answer');
  targetAnswer.style.color = 'black';
}

function hideFunction(btn) {
  const currentCard = btn.closest('.flashcard');
  const targetAnswer = currentCard.querySelector('.answer');
  targetAnswer.style.color = 'white';
}

原理说明 #

• btn.closest('.flashcard')：会从按钮元素开始向上查找，找到第一个带flashcard类的父元素，这样就锁定了当前按钮所属的问答组。
• currentCard.querySelector('.answer')：在这个问答组里只找属于它自己的answer元素，不会影响其他组的答案。

如果你不想修改HTML结构，也可以用previousElementSibling来定位答案，但这种方式依赖固定的HTML顺序，不如包裹容器的方式健壮。比如：

function showFunction(btn) {
  // 找到按钮所在的div，再找它的前一个兄弟元素（也就是答案）
  const answer = btn.parentElement.previousElementSibling;
  answer.style.color = 'black';
}

不过还是更推荐用容器包裹的方式，后续维护或修改结构时不容易出问题~

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