Question

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span class="correct">(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span class="correct">(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br>
  <span class="correct">(D) Lorem ipsum dolor</span></p>
<button class="ans-button">check answer</button>

单击问题的“检查答案”按钮时如何更改正确选项的颜色？

Answer 1

删除每个span元素上的硬编码correct类，并在CSS中定义该类，然后在按钮上单击以找到相应的span（answer）元素并将该类添加到该元素：

[...document.getElementsByClassName('ans-button')].forEach(button => button.addEventListener('click', highlightAnswer));

function highlightAnswer() {
    const answer = event.target.previousElementSibling.querySelector('span');
    answer.classList.add('correct');
}

.correct {
  background-color: green;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span>(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor
</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span>(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor
</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br><span>(D) Lorem ipsum dolor</span>
</p>
<button class="ans-button">check answer</button>

Answer 2

使用JQuery，这非常简单：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span class="correct">(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span class="correct">(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br>
  <span class="correct">(D) Lorem ipsum dolor</span></p>
<button class="ans-button">check answer</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  var a = $(".ans-button").on("click", function() {
    $(this).prev().find(".correct").css("color", "green");
  });
</script>

Answer 3

您可以在此处使用IF ELSE，如果答案正确，则在CSS中使.class为其赋予颜色，如果答案正确，则适用CSS，否则，转到其他，可以不使用任何内容而保留为空或者，如果您想作为奖励告诉它错误或给它其他颜色，也可以给出警报

单击检查答案按钮时如何使用JavaScript更改正确答案的颜色

3 个答案: