在 div 中而不是在另一个中运行 jquery 函数

Question

我正在做一个非常简单的 html/jquery 测验。它将有多个问题和多个答案。每次在问题（“.question”）中选择答案（“.question-option”）时，它都会运行我的 jquery 函数。

问题是结果出现在下一个问题上，我猜是 DOM 中的最后一个问题，我将我的函数包装在一个 .each 函数中，但它仍然无法正常工作...... 这是一个 jsfiddle：https://jsfiddle.net/ce1gtk9w/

$(".question").each(function() {
  var question = $(this)
  questionOptionsAll = question.find($('.question-options'))
  questionOption = questionOptionsAll.find($('.question-option'))
  questionTrueFalse = question.find($('.answer-true-false'))
  questionOption.click(function() {
    questionOptionsAll.addClass('answered')
    var questionOptionSelected = $(this)
    if (questionOptionSelected.hasClass('correct')) {
      question.addClass('questions-correct')
      questionTrueFalse.text('correct !')
    } else if (!$(this).hasClass('correct')) {
      questionOptionSelected.addClass('uncorrect')
      question.addClass('questions-uncorrect')
      questionTrueFalse.text('Wrong !')
    }
  })
})

.question {
    margin-bottom: 40px;
}

.answer {
    display: none;
}

.question-options.answered li {
    pointer-events: none;
}
.questions-correct .answer {
    display: block;
}

.questions-correct .question-option.correct {
    background-color: yellow;
}

.questions-uncorrect .answer {
    display: block;
}

.questions-uncorrect .question-option.correct {
    background-color: yellow;
}

.question-option.uncorrect {
    background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="question" id="question-2">
  <div class="question-title">
    Question One
  </div>
  <ul class="question-options">
    <li class="question-option correct">2000</li>
    <li class="question-option">2012</li>
    <li class="question-option">2022</li>
  </ul>
  <div class="answer-true-false"></div>
  <div class="answer">Answer One.</div>
</div>
<div class="question" id="question-2">
  <div class="question-title">
    Question two
  </div>
  <ul class="question-options">
    <li class="question-option correct">2000</li>
    <li class="question-option">2012</li>
    <li class="question-option">2022</li>
  </ul>
  <div class="answer-true-false"></div>
  <div class="answer">Answer Two.</div>
</div>

Answer 1

请委托

注意我将所有问题都包含在一个带有 ID 问题的 div 中

$("#questions").on("click", ".question-option", function() {
  const $question = $(this).closest(".question");
  const $questionTrueFalse = $question.find('.answer-true-false');
  const correct = $(this).hasClass('correct');
  $question.toggleClass('questions-correct', correct)
  $questionTrueFalse.text(correct ? 'correct !' : 'Wrong !')
})

.question {
  margin-bottom: 40px;
}

.answer {
  display: none;
}

.question-options.answered li {
  pointer-events: none;
}

.questions-correct .answer {
  display: block;
}

.questions-correct .question-option.correct {
  background-color: yellow;
}

.questions-uncorrect .answer {
  display: block;
}

.questions-uncorrect .question-option.correct {
  background-color: yellow;
}

.question-option.uncorrect {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="questions">
  <div class="question" id="question-1">
    <div class="question-title">
      Question One
    </div>
    <ul class="question-options">
      <li class="question-option correct">2000</li>
      <li class="question-option">2012</li>
      <li class="question-option">2022</li>
    </ul>
    <div class="answer-true-false"></div>
    <div class="answer">Answer One.</div>
  </div>
  <div class="question" id="question-2">
    <div class="question-title">
      Question two
    </div>
    <ul class="question-options">
      <li class="question-option correct">2000</li>
      <li class="question-option">2012</li>
      <li class="question-option">2022</li>
    </ul>
    <div class="answer-true-false"></div>
    <div class="answer">Answer Two.</div>
  </div>
</div>