JS中选项点击颜色切换功能失效问题及优化方案咨询

问题根源 #

你的代码里有if (!acceptingAnswers) return;的判断，大概率是首次点击后acceptingAnswers被设为false且没有重置，导致后续点击直接跳过样式切换逻辑，所以无响应。

修复原代码的方案 #

先确保acceptingAnswers在需要选择时处于true状态（比如切换题目、允许重新选择时重置变量），同时优化元素获取方式让代码更健壮：

const choices = Array.from(document.getElementsByClassName("choice-text"));
choices.forEach((choice) => {
  choice.addEventListener("click", (e) => {
    if (!acceptingAnswers) return;

    // 移除所有选项的selected类
    document.querySelectorAll(".choice-container").forEach(container => {
      container.classList.remove("selected");
    });

    // 用closest更稳妥地获取点击选项的容器
    const selectedContainer = e.target.closest(".choice-container");
    selectedContainer.classList.add("selected");
  });
});

更优实现方式：事件委托 #

不用给每个choice-text绑定事件，直接在选项的统一父容器上绑定一个监听，性能更好，还支持动态添加选项：

HTML（仅新增父容器，其余不变）

<h2 id="question">What is the answer to this questions?</h2>
<div class="choices-wrapper">
  <div class="choice-container">
    <p class="choice-prefix">A</p>
    <p class="choice-text" data-number="1">Choice 1</p>
  </div>
  <div class="choice-container">
    <p class="choice-prefix">B</p>
    <p class="choice-text" data-number="2">Choice 2</p>
  </div>
  <div class="choice-container">
    <p class="choice-prefix">C</p>
    <p class="choice-text" data-number="3">Choice 3</p>
  </div>
  <div class="choice-container">
    <p class="choice-prefix">D</p>
    <p class="choice-text" data-number="4">Choice 4</p>
  </div>
</div>
<div class="btnNav">
  <button class="btn" onclick="navBack(event)">Back</button>
  <button class="btn" onclick="navForward(event)">Next</button>
</div>
<script src="game.js"></script>

CSS（保持原样式）

.selected {
  background-color: #f1f1f1;
}

JavaScript

const choicesWrapper = document.querySelector(".choices-wrapper");

choicesWrapper.addEventListener("click", (e) => {
  // 只处理点击选项容器的情况
  const targetContainer = e.target.closest(".choice-container");
  if (!targetContainer || !acceptingAnswers) return;

  // 移除所有选项的选中状态
  document.querySelectorAll(".choice-container").forEach(container => {
    container.classList.remove("selected");
  });

  // 给当前点击的容器添加选中类
  targetContainer.classList.add("selected");
});

额外提示 #

• 确认acceptingAnswers的逻辑：比如点击「Next」切换题目后，要把它设回true，允许用户选择新题目选项；如果是答题后锁定选择，逻辑没问题，但要确保需要重新选择时重置变量。
• 用closest()代替parentElement，即使后续HTML结构嵌套变化，也能准确找到目标容器，避免代码失效。

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