如何用JavaScript实现动态问答样式并高亮正确与错误答案

在前端开发中，动态问答功能可以提升用户的交互体验，其中点击选项后高亮正确与错误答案是核心需求之一，我们可以通过JavaScript结合选择器来实现这一效果。

实现思路梳理

整个功能的实现可以分为三个核心步骤：首先通过选择器获取所有的问答选项元素，然后给每个选项绑定点击事件，点击时判断当前选项是否为正确答案，最后根据判断结果给对应选项添加不同的高亮样式。

基础HTML结构准备

我们先搭建一个简单的问答页面结构，包含问题、多个选项以及对应的正确答案标识：

<div class="question-container">
  <h3 class="question">JavaScript中用于获取元素ById的方法是？</h3>
  <ul class="options-list">
    <li class="option" data-correct="false">getElementsByClassName</li>
    <li class="option" data-correct="true">getElementById</li>
    <li class="option" data-correct="false">querySelectorAll</li>
    <li class="option" data-correct="false">getElementsByTagName</li>
  </ul>
  <p class="result-tip"></p>
</div>

CSS样式定义

我们需要定义默认选项样式、正确高亮样式和错误高亮样式，方便后续通过JavaScript动态切换：

/* 默认选项样式 */
.option {
  padding: 10px 15px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  list-style: none;
  transition: all 0.3s ease;
}
/* 正确高亮样式 */
.option.correct {
  background-color: #e6f7e9;
  border-color: #52c41a;
  color: #52c41a;
}
/* 错误高亮样式 */
.option.wrong {
  background-color: #fff1f0;
  border-color: #ff4d4f;
  color: #ff4d4f;
}
/* 结果提示样式 */
.result-tip {
  margin-top: 15px;
  font-size: 14px;
}

JavaScript核心逻辑实现

接下来通过JavaScript实现交互逻辑，这里我们会用到querySelector、querySelectorAll等选择器来获取DOM元素。

获取DOM元素

首先通过选择器获取所有选项元素和结果提示元素：

// 获取所有选项元素
const options = document.querySelectorAll('.option');
// 获取结果提示元素
const resultTip = document.querySelector('.result-tip');

绑定点击事件与逻辑处理

遍历所有选项，给每个选项绑定点击事件，点击时判断data-correct属性的值来确定答案正确性，然后添加对应高亮类：

// 遍历所有选项绑定点击事件
options.forEach(option => {
  option.addEventListener('click', function() {
    // 先移除所有选项的高亮类，避免重复点击重复添加
    options.forEach(item => {
      item.classList.remove('correct', 'wrong');
    });
    // 获取当前选项的正确标识
    const isCorrect = this.getAttribute('data-correct') === 'true';
    if (isCorrect) {
      // 正确答案添加correct类
      this.classList.add('correct');
      resultTip.textContent = '回答正确！';
      resultTip.style.color = '#52c41a';
    } else {
      // 错误答案添加wrong类
      this.classList.add('wrong');
      resultTip.textContent = '回答错误，再试试吧';
      resultTip.style.color = '#ff4d4f';
      // 同时高亮正确答案
      const correctOption = document.querySelector('.option[data-correct="true"]');
      correctOption.classList.add('correct');
    }
  });
});

功能扩展说明

上述实现是基础版本，还可以根据实际需求进行扩展：

• 添加答题后禁用选项点击的功能，避免重复答题
• 支持多题切换，通过动态更新问题和选项的data-correct属性实现
• 增加答题统计功能，记录用户答对和答错的数量

通过选择器操作DOM结合样式切换，我们可以快速实现动态问答的高亮效果，整个逻辑清晰且易于维护，适配大多数前端问答场景的开发需求。

JavaScript选择器动态问答高亮答案修改时间：2026-07-17 04:15:24