如何将猜中值显示到对应指定div？世界杯猜谜游戏优化需求

需求说明 #

现有猜谜游戏逻辑是用户输入匹配预设国家后，按猜中顺序添加到列表里，现在需要升级为：猜中某个国家时，将答案显示到该国家对应的专属Div中（比如输入Germany，仅在Germany对应的Div里显示）。

解决方案 #

核心思路是用data属性绑定国家与对应Div，匹配成功后通过该属性精准定位目标Div，再更新内容。

步骤1：更新HTML结构

先为每个参赛国添加专属的显示容器，每个容器通过data-country属性与validSearch数组中的国家名称一一对应（注意大小写完全匹配）：

<div class="barra-widget">
  <div>
    <button onclick="startTimer()" id="start">Start</button>
  </div>

  <div class="guess-bar">
    <div class="guess-bar-input">
      <input id="search" type="text" name="text" placeholder="Insert Country Here" disabled>
      <button onclick="sendToPage()" id="guess" disabled>Guess!</button>
    </div>

    <div class="guess-timer">
      <span id="count">90</span> sec
    </div>
  </div>
</div>

<!-- 新增：每个国家对应的专属显示容器 -->
<div class="country-display-grid">
  <div class="country-item" data-country="Brazil"></div>
  <div class="country-item" data-country="Germany"></div>
  <div class="country-item" data-country="Italy"></div>
  <div class="country-item" data-country="Argentine"></div>
  <div class="country-item" data-country="France"></div>
  <div class="country-item" data-country="Uruguay"></div>
  <div class="country-item" data-country="England"></div>
  <div class="country-item" data-country="Spain"></div>
  <div class="country-item" data-country="Netherlands"></div>
  <div class="country-item" data-country="Tchechoslovachia"></div>
  <div class="country-item" data-country="Hungary"></div>
  <div class="country-item" data-country="Sweden"></div>
  <div class="country-item" data-country="Croatia"></div>
</div>

<!-- 可保留原列表，也可根据需求删除 -->
<ol id="right-answers"></ol>

步骤2：修改JavaScript逻辑

替换原有的列表添加逻辑，改为通过data-country定位目标Div并更新内容：

var validSearch = [
  "Brazil",
  "Germany",
  "Italy",
  "Argentine",
  "France",
  "Uruguay",
  "England",
  "Spain",
  "Netherlands",
  "Tchechoslovachia",
  "Hungary",
  "Sweden",
  "Croatia",
];

function sendToPage() {
  // 获取输入值并去除首尾空格
  var q = document.getElementById("search").value.trim(),
    re,
    result;

  // 输入为空则直接返回
  if (!q.length) {
    return;
  }

  // 构建正则表达式（支持模糊匹配，忽略大小写）
  re = new RegExp(".*" + q.replace(/\s/g, "\\s") + ".*", "ig");

  // 在有效数组中查找匹配项
  validSearch.some(function(v) {
    result = re.exec(v);
    if (result) {
      // 从数组中移除已猜中的国家
      validSearch.splice(validSearch.indexOf(result[0]), 1);
      return true;
    }
  });

  // 匹配成功的处理逻辑
  if (result !== null) {
    // 通过data-country属性定位到对应国家的Div
    var targetDiv = document.querySelector(`[data-country="${result[0]}"]`);
    if (targetDiv) {
      // 更新Div内容，也可添加样式类（比如标记已猜中）
      targetDiv.textContent = result[0];
      targetDiv.classList.add("guessed");
    }
  } else {
    alert("Try Again! - " + q);
  }

  // 清空输入框并聚焦
  document.getElementById("search").value = "";
  document.getElementById("search").focus();
}

关键说明

• data-country属性是核心：它建立了国家名称与Div的唯一关联，确保能精准定位到目标元素。
• 匹配成功后，不仅可以设置textContent显示答案，还能通过classList.add添加自定义样式（比如改变背景色、字体样式，标记为已猜中状态）。
• 原有的validSearch数组移除逻辑保留，避免重复猜中同一国家。

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