仅中间元素的Toggle button失效问题（HTML/Javascript）

问题原因 #

你在循环生成每个提示条目时，每次都会选中页面上所有的.toggle-btn并重复绑定点击事件。这导致中间的按钮被绑定了两次点击事件：

• 生成第二个条目时，给它绑定第一次事件；
• 生成第三个条目时，又给它绑定第二次事件。

当点击中间按钮时，两次toggle操作会抵消：第一次移除hidden类显示英文内容，第二次又添加hidden类把它隐藏回去，所以看起来按钮“失效”。而顶部按钮被绑定三次事件，三次toggle最终表现为有效；底部按钮只绑定一次，正常生效。

修正代码 #

把事件绑定的逻辑改成只针对当前刚创建的按钮，避免重复绑定：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Lesson Prompts</title>
</head>

<body>
  <h1>Lesson Prompts</h1>
  <div id="prompts"></div>
  <script id="lessondata" type="application/json">
    {
      "prompts": [{
          "audio": "prompt1.mp3",
          "spanish": "Hola, ¿cómo estás?",
          "english": "Hello, how are you?"
        },
        {
          "audio": "prompt3.mp3",
          "spanish": "¿Qué hora es?",
          "english": "What time is it?"
        },
        {
          "audio": "prompt2.mp3",
          "spanish": "Me llamo Juan.",
          "english": "My name is Juan."
        }
      ]
    }
  </script>
  <script>
    var data = JSON.parse(document.getElementById('lessondata').textContent);
    const promptsEl = document.getElementById('prompts');
    data.prompts.forEach(prompt => {
      const promptEl = document.createElement('div');
      promptEl.classList.add('prompt');
      promptEl.innerHTML = `
        <button class="toggle-btn">Show/Hide</button>
        <audio src="${prompt.audio}" controls></audio>
        <p class="spanish">${prompt.spanish}</p>
        <div class="english hidden">${prompt.english}</div>
      `;
      promptsEl.appendChild(promptEl);

      // 只给当前条目的按钮绑定事件，避免重复绑定
      const toggleBtn = promptEl.querySelector('.toggle-btn');
      toggleBtn.addEventListener('click', () => {
        const englishEl = promptEl.querySelector('.english');
        englishEl.classList.toggle('hidden');
      });
    });
  </script>

  <style>
    .hidden {
      display: none;
    }
  </style>
</body>

</html>

关键改动说明 #

• 移除了全局选择所有.toggle-btn的逻辑，改为从当前刚创建的promptEl里获取对应的按钮；
• 每个按钮只被绑定一次点击事件，确保每次点击只执行一次toggle操作，避免状态抵消。

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