实验页面点击对错答案时按钮颜色切换的技术实现咨询

实现点击答题按钮切换颜色的方案 #

首先我先补全你未写完的HTML结构（假设四个按钮分别对应不同选项，用data-is-correct属性标记正确答案），然后分两种常用方式实现功能：

第一步：完善HTML结构 #

给每个按钮添加标识正确/错误的自定义属性，方便后续JS判断：

<div id="test" style="display:block"> <!-- 测试时可以先把display改成block -->
  <div class="row center-block text-center">
    <img id="testImage" src="static/img/errorhedgehog.jpg" height="300">
  </div>
  <div class="row text-center center-block">
    <h3 id="labelPrompt">Choose the corresponding label:</h3>
  </div>
  <div class="row text-center center-block">
    <button class="quizChoice btn btn-md btn-info" id="quiz1" data-is-correct="false">Option 1</button>
    <button class="quizChoice btn btn-md btn-info" id="quiz2" data-is-correct="true">Option 2</button>
    <button class="quizChoice btn btn-md btn-info" id="quiz3" data-is-correct="false">Option 3</button>
    <button class="quizChoice btn btn-md btn-info" id="quiz4" data-is-correct="false">Option 4</button>
  </div>
</div>

第二步：定义样式类 #

用CSS类来控制正确/错误按钮的颜色，比直接修改内联样式更易维护：

/* 正确答案的绿色样式 */
.quizChoice.correct {
  background-color: #28a745;
  border-color: #28a745;
  color: white;
}

/* 错误答案的红色样式 */
.quizChoice.incorrect {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

/* 点击后禁用按钮，防止重复选择 */
.quizChoice.disabled {
  pointer-events: none;
  opacity: 0.65;
}

第三步：实现交互逻辑 #

方案1：原生JavaScript（无依赖，推荐）

不需要引入任何库，直接用原生JS绑定事件：

// 获取所有答题按钮
const quizButtons = document.querySelectorAll('.quizChoice');

// 给每个按钮添加点击事件
quizButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 判断当前按钮是否为正确答案
    const isCorrect = this.getAttribute('data-is-correct') === 'true';
    
    // 添加对应样式类
    if (isCorrect) {
      this.classList.add('correct');
    } else {
      this.classList.add('incorrect');
    }
    
    // 可选：点击后禁用所有按钮，避免重复操作
    quizButtons.forEach(btn => btn.classList.add('disabled'));
  });
});

方案2：jQuery实现（如果项目已引入jQuery）

如果你的项目已经用了jQuery，可以用更简洁的写法：

$(document).ready(function() {
  $('.quizChoice').on('click', function() {
    const $btn = $(this);
    const isCorrect = $btn.data('is-correct');
    
    // 添加样式类
    isCorrect ? $btn.addClass('correct') : $btn.addClass('incorrect');
    
    // 可选：禁用所有按钮
    $('.quizChoice').addClass('disabled');
  });
});

额外优化：点击错误时自动高亮正确答案 #

如果需要在用户选错时，同时显示正确选项，可以修改JS逻辑：

// 原生JS版本扩展
quizButtons.forEach(button => {
  button.addEventListener('click', function() {
    const isCorrect = this.getAttribute('data-is-correct') === 'true';
    
    if (isCorrect) {
      this.classList.add('correct');
    } else {
      this.classList.add('incorrect');
      // 找到正确按钮并高亮
      const correctBtn = document.querySelector('.quizChoice[data-is-correct="true"]');
      correctBtn.classList.add('correct');
    }
    
    // 禁用所有按钮
    quizButtons.forEach(btn => btn.classList.add('disabled'));
  });
});

这些方案都可以轻松实现你要的功能，而且结构清晰，后续修改样式或逻辑都很方便。

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