JavaScript单词游戏：遍历答案提示数组及单提示展示问题求助

嘿，我来帮你搞定这两个问题！咱们一步步来，先从数据关联开始，再解决点击触发的问题。

第一步：让单词和提示一一绑定 #

首先，你需要把单词和对应的提示配对存储，避免两个数组顺序不一致导致的关联问题。推荐用对象数组来存，每个对象包含单词和它的提示：

// 用对象数组把单词和提示一一对应起来
const wordHintPairs = [
  { word: "Apple", hint: "一种红色或绿色的水果" },
  { word: "JavaScript", hint: "网页开发常用的脚本语言" },
  { word: "StackOverflow", hint: "程序员的问答社区" }
];

如果你的项目里已经有现成的单词和提示数组，也可以先把它们合并成对象数组：

// 假设你原来的两个数组
const words = ["Apple", "JavaScript", "StackOverflow"];
const hints = ["一种红色或绿色的水果", "网页开发常用的脚本语言", "程序员的问答社区"];

// 合并成对象数组
const wordHintPairs = words.map((word, index) => ({
  word: word,
  hint: hints[index]
}));

第二步：渲染单词和对应按钮，实现点击显示单个提示 #

接下来，我们动态渲染每个单词项，给每个按钮绑定独立的点击事件，确保点击时只显示当前单词对应的提示。用原生JS就能实现：

HTML基础结构 #

<div id="game-container"></div>

JavaScript渲染与事件绑定 #

const gameContainer = document.getElementById('game-container');

// 循环渲染每个单词项
wordHintPairs.forEach((pair) => {
  // 创建单词项容器
  const wordItem = document.createElement('div');
  
  // 创建单词元素
  const wordElement = document.createElement('p');
  wordElement.textContent = pair.word;
  wordElement.style.fontWeight = 'bold'; // 临时加粗区分单词
  
  // 创建提示按钮
  const hintButton = document.createElement('button');
  hintButton.textContent = '显示提示';
  
  // 创建提示元素（初始隐藏）
  const hintElement = document.createElement('p');
  hintElement.textContent = pair.hint;
  hintElement.style.display = 'none'; // 默认隐藏提示
  
  // 给按钮绑定点击事件：只切换当前提示的显示状态
  hintButton.addEventListener('click', () => {
    hintElement.style.display = hintElement.style.display === 'none' ? 'block' : 'none';
  });
  
  // 把元素组装到单词项里
  wordItem.appendChild(wordElement);
  wordItem.appendChild(hintButton);
  wordItem.appendChild(hintElement);
  
  // 把单词项加到游戏容器
  gameContainer.appendChild(wordItem);
});

为什么这样能解决你的问题？ #

• 单词与提示关联：通过对象数组，每个单词和它的提示天生绑定在一起，不会出现顺序错位的情况，也不用单独维护两个数组。
• 单个提示触发：在循环渲染时，每个按钮的点击事件都是独立绑定的，只会操作当前循环项里的hintElement，完全不会影响其他单词的提示。

这样调整后，你的两个核心问题就都解决啦～如果还有细节需要调整，随时说！

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