点击HTML的correct/wrong span切换对应列表项问答显示的实现方法

• 全局DOM查询全部使用document.querySelector()，该方法只会返回页面中第一个匹配选择器的元素，和实际触发点击的元素无关联，因此无论点击哪个选项，操作的永远是第一个列表项的内容。
• 给.correct、.wrong类绑定了完全重复的点击逻辑，代码冗余。
• CSS存在类名拼写错误：写的.diplay少了字母s，和JS中操作的.display类名不匹配，导致样式无法生效。

无需给每个元素单独设置ID，只要利用点击事件的上下文做局部DOM查询，就能精准操作当前点击元素所属的列表项：

• 统一选中所有带.correct/.wrong类的可点击元素，减少重复循环
• 点击事件触发时，通过this.closest("li")定位当前被点击元素所属的<li>节点
• 仅在该li的DOM范围内查找对应的问题文本、答案文本元素，切换显示状态

修正后的JavaScript代码 #

// 统一选中所有可点击选项
const clickableOptions = document.querySelectorAll(".correct, .wrong");

for (let i = 0; i < clickableOptions.length; i++) {
  clickableOptions[i].addEventListener("click", function () {
    // 找到当前点击元素所属的li
    const parentLi = this.closest("li");
    // 仅在当前li范围内查找需要操作的元素
    const questionEl = parentLi.querySelector(".question");
    const answerEl = parentLi.querySelector(".answer");

    // 执行交互逻辑
    questionEl.classList.add("nodisplay");
    answerEl.classList.remove("answer");
    answerEl.classList.add("display");
  });
}

修正后的CSS代码 #

修正拼写错误，同时调整透明度最终值，保证元素能正常完成显示/隐藏的过渡效果：

.answer {
  margin-left: 5px;
  display: inline-block;
  transition: 0.3s linear;
  opacity: 0;
}
.question {
  margin-left: 5px;
}
/* 修正原拼写错误的.diplay为.display */
.display {
  display: inline;
  margin-left: 5px;
  transition: 0.3s linear;
  opacity: 1;
  text-align: left;
  float: left;
}
.nodisplay {
  display: inline-block;
  transition: 0.3s linear;
  opacity: 0;
}

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