ASP.NET Core MVC中jQuery Ajax实现答题标签颜色切换问题求助

核心逻辑对应实现步骤 #

针对你提到的三种场景，核心是通过类名标记状态结合CSS样式实现颜色变化，以下是具体方案：

1. 先确认类名规范（排查类名调用问题） #

确保你的HTML结构满足以下类名约定：

• 所有选项标签统一使用.option类
• 正确答案标签额外添加.correct类
• 选中的选项通过.selected类标记
• 结果状态用.show-correct（正确显示绿色）和.wrong（错误选中显示红色）区分

2. 完整代码示例 #

HTML结构

<div class="quiz-container">
  <h3>题目：以下哪个是JavaScript的原始数据类型？</h3>
  <div class="option-group">
    <div class="option">Array</div>
    <div class="option correct">String</div>
    <div class="option">Object</div>
    <div class="option">Function</div>
  </div>
  <button class="submit-btn">提交答案</button>
</div>

CSS样式

/* 选项默认样式 */
.option {
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.2s;
}

/* 选项选中状态 */
.option.selected {
  border-color: #666;
  background-color: #f5f5f5;
}

/* 正确答案高亮样式 */
.option.correct.show-correct {
  background-color: #d4edda;
  border-color: #28a745;
  color: #155724;
}

/* 错误选中样式 */
.option.selected.wrong {
  background-color: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

JavaScript逻辑

// 获取DOM元素
const options = document.querySelectorAll('.option');
const submitBtn = document.querySelector('.submit-btn');
const correctOption = document.querySelector('.option.correct');

// 处理选项点击选中
options.forEach(option => {
  option.addEventListener('click', () => {
    // 清除其他选项的选中状态
    options.forEach(opt => opt.classList.remove('selected'));
    // 标记当前选项为选中
    option.classList.add('selected');
  });
});

// 处理提交逻辑
submitBtn.addEventListener('click', () => {
  // 重置所有结果状态类
  options.forEach(opt => {
    opt.classList.remove('show-correct', 'wrong');
  });

  const selectedOption = document.querySelector('.option.selected');

  if (!selectedOption) {
    // 场景3：未选择任何答案，仅高亮正确选项
    correctOption.classList.add('show-correct');
  } else if (selectedOption.classList.contains('correct')) {
    // 场景1：选中正确答案，高亮该选项
    selectedOption.classList.add('show-correct');
  } else {
    // 场景2：选中错误答案，错误选项变红，正确选项变绿
    selectedOption.classList.add('wrong');
    correctOption.classList.add('show-correct');
  }
});

3. 类名调用排查要点 #

• 检查正确答案的.correct类是否唯一且正确添加（单选场景下只能有一个）
• 确认提交时是否正确获取到.selected类的元素，避免选择器写错（比如误用querySelectorAll处理单个元素）
• 确保结果状态类（.show-correct/.wrong）没有和其他样式类冲突

内容的提问来源于stack exchange，提问作者ĐỊNH HIẾU TRỊNH