如何实现点击按钮时将测验正确选项的<p>标签变粗并改为绿色？

实现方案 #

要实现点击「Show Answer」按钮后，对应正确答案变为粗体绿色，需要结合CSS样式定义和JavaScript事件处理，以下是完整实现代码：

1. 样式定义（CSS） #

先添加用于标记正确答案的样式：

.correct-answer {
    font-weight: bold;
    color: #2ecc71; /* 绿色，可根据需求调整色调 */
}

2. 完整HTML（含JavaScript） #

在现有HTML基础上，添加JavaScript逻辑处理按钮点击事件：

<div class="question">
      <p> <b>1. पृथ्वी पर दिन और रात होते हैं?</b> </p>
      <p class="option-q0" data-option="a">(A) दैनिक गति के कारण</p>
      <p class="option-q0" data-option="b">(B) वार्षिक गति के कारण </p>
      <p class="option-q0" data-option="c">(C) छमाही गति के कारण</p>
      <p class="option-q0" data-option="d">(D) तिमाही गति के कारण </p>
      <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="a" data-id="0" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
      <p> <b>2. सबसे बड़ा ग्रह है?</b> </p>
      <p class="option-q1" data-option="a">(A) बृहस्पति</p>
      <p class="option-q1" data-option="b">(B) पृथ्वी</p>
      <p class="option-q1" data-option="c">(C) युरेनस</p>
      <p class="option-q1" data-option="d">(D) शुक्र</p>
      <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="a" data-id="1" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
      <p> <b>3. सबसे छोटा ग्रह है?</b> </p>
      <p class="option-q2" data-option="a">(A) मंगल</p>
      <p class="option-q2" data-option="b">(B) शनि</p>
      <p class="option-q2" data-option="c">(C) बुध</p>
      <p class="option-q2" data-option="d">(D) नेप्चून</p>
      <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="c" data-id="2" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
      <p> <b>4. अगुलहास धारा किस महासागर में बनती है ?</b> </p>
      <p class="option-q3" data-option="a">(A) प्रशान्त महासागर में</p>
      <p class="option-q3" data-option="b">(B) हिन्द महासागर में </p>
      <p class="option-q3" data-option="c">(C) आर्कटिक महासागर में </p>
      <p class="option-q3" data-option="d">(D) अन्य</p>
      <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="b" data-id="3" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
      <p> <b>5. पृथ्वी का सबसे भीतर वाला भाग क्रोड किसका बना होता है ?</b> </p>
      <p class="option-q4" data-option="a">(A) ताँबा और जस्ता </p>
      <p class="option-q4" data-option="b">(B) निकेल और ताँबा</p>
      <p class="option-q4" data-option="c">(C) लोहा और जस्ता </p>
      <p class="option-q4" data-option="d">(D) लोहा और निकेल</p>
      <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="d" data-id="4" name="button" type="button"> Show Answer </button>
  </div>

<style>
.correct-answer {
    font-weight: bold;
    color: #2ecc71;
}
</style>

<script>
// 获取所有显示答案按钮
const answerButtons = document.querySelectorAll('.showAnswerBtn');

answerButtons.forEach(button => {
    button.addEventListener('click', function() {
        const questionId = this.dataset.id;
        const correctOption = this.dataset.answer;
        
        // 找到对应的正确答案元素
        const correctAnswerElement = document.querySelector(`.option-q${questionId}[data-option="${correctOption}"]`);
        
        // 应用高亮样式
        if (correctAnswerElement) {
            correctAnswerElement.classList.add('correct-answer');
            // 禁用按钮防止重复点击
            this.disabled = true;
            this.textContent = 'Answer Shown';
        }
    });
});
</script>

代码说明 #

• CSS部分：定义了.correct-answer类，设置粗体和绿色字体，用于标记正确答案。
• JavaScript部分：
  1. 获取所有「Show Answer」按钮，为每个按钮绑定点击事件。
  2. 点击时，从按钮的data-id和data-answer属性中获取对应问题ID和正确选项。
  3. 通过选择器找到对应的选项元素，添加样式类实现高亮。
  4. 禁用按钮并修改文本，避免重复操作。

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