javascript - 建立一个测验 - 它有效，但仅限于第一个问题

Question

我正在使用 JQuery 构建一个测验类游戏。我的游戏目前按照我希望的方式运行，但仅限于第一个问题。

var progress = 0;
var score = 0;

var running = true;

var questions = [
  {question: 'Which character is played by Robert Downey Junior?', answers: ['Thor', 'Iron Man', 'Captain America', 'Star Lord'], correct: 'Iron Man'},
  {question: 'What colour is the star on Captain Americas shield?', answers: ['Red', 'Silver/Grey', 'Blue', 'Yellow/Gold'], correct: 'Silver/Grey'}
];

var $quiz = $('.quiz');
var $question = $('#quiz-question');
var $answers = $('#answers');
var $next = $('#next');
var $results = $('#results');

var showQuestion = q => {
  if (progress < questions.length) {
    $question.html(q.question);
    $answers.html(' ');
    q.answers.forEach(function(ans) {
      $answers.append("<div class='answer'>" + ans + "</div>");
    })
  } else {
    $results.html("<h2>Your Results:</h2><p>You scored " + score + "/" + questions.length + "</p>");
    $quiz.hide();
    $results.show();
  }
};

showQuestion(questions[progress]);

$(document).ready(function(){
  $next.hide();
  $results.hide();

  $('.answer').on('click', function(){
    if($(this).html() === questions[progress].correct && running) {
      progress++;
      running = false;
      score++;
      $(this).css('color', 'green');
      $(this).css('border', '3px solid green');
      $(this).css('font-weight', 'bold');
      $next.show();
    } else if ($(this).html() !== questions[progress] && running) {
      $(this).css('color', 'red');
      $(this).css('border', '3px solid red');
      $(this).css('font-weight', 'bold');
      progress++;
      running = false;
      $next.show();
    }
  })

  $next.on('click', function() {
    running = true;
    showQuestion(questions[progress]);
  })
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #c7ecee;
  font-family: 'Karla', sans-serif;
}

main {
  min-height: 500px;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

main .quiz {
  width: 40%;
  margin: 0 auto;
  text-align: center;
}

main .quiz #quiz-question {
  font-size: 2rem;
  width: 100%;
  border: 2px solid #4d4d4d;
  color: #fff;
  background-color: #4d4d4d;
  padding: 1rem;
}

main .quiz #answers {
  font-size: 1.5rem;
  border: 1px solid #4d4d4d;
}

main .quiz #answers .answer {
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #4d4d4d;
  cursor: pointer;
}

main .quiz #answers .answer:hover {

}

div#ui {
  text-align: center;
  width: 100%;
  padding: .75rem;
}

div#ui button {
  font-size: 1.75rem;
  padding: .75rem;
  background-color: #4d4d4d;
  border: 1px solid #4d4d4d;
  color: #fff;
  cursor: pointer;
}

  <main>
    <div class='quiz'>
      <div id='quiz-question'>
      </div>
      <div id='answers'>
      </div>
    </div>
    <div id='results'>
    </div>
  </main>

  <div id='ui'>
    <button id='next'>Next</button>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

基本上，会显示一个问题及其答案，当单击一个答案时，它会停止运行游戏，因此无法单击其他答案(或者不能多次单击一个答案来提高分数)。回答问题后，底部会出现一个按钮，可转到下一个问题。如果没有更多问题，则会显示结果。

对于一个问题，这完全符合我的愿望。当我添加任何其他问题时，它会完全按照应有的方式显示问题，但不再应用单击效果。我认为这与调用 $(document).ready() 函数时不存在的元素有关。谁能告诉我如何解决这个问题？

编辑以包含代码片段。取消注释第二个任务

Answer 1

在第 37 行，更改:

$('.answer').on('click', function(){

至

 $('body').on('click', '.answer', function(){

问题是，当你写:

$(document).ready(function(){
    $next.hide();
    $results.hide();

    $('.answer').on('click', function(){

您定位具有 .answer 类的所有元素(当前)。由于这只是第一个问题(一开始)，因此它不适用于第一个问题之后的问题。

如果你改为写:

$(document).ready(function(){
    $next.hide();
    $results.hide();

    $('body').on('click', '.answer', function(){

您告诉 jQuery 将 click 事件添加到将使用类 .answer 添加的任何当前元素和新元素(在 body-元素)。最好保持具体，例如测验的 ID。

查看整个示例:

var progress = 0;
var score = 0;

var running = true;

var questions = [
  {question: 'Which character is played by Robert Downey Junior?', answers: ['Thor', 'Iron Man', 'Captain America', 'Star Lord'], correct: 'Iron Man'},
  {question: 'What colour is the star on Captain Americas shield?', answers: ['Red', 'Silver/Grey', 'Blue', 'Yellow/Gold'], correct: 'Silver/Grey'}
];

var $quiz = $('.quiz');
var $question = $('#quiz-question');
var $answers = $('#answers');
var $next = $('#next');
var $results = $('#results');

var showQuestion = q => {
  if (progress < questions.length) {
    $question.html(q.question);
    $answers.html(' ');
    q.answers.forEach(function(ans) {
      $answers.append("<div class='answer'>" + ans + "</div>");
    })
  } else {
    $results.html("<h2>Your Results:</h2><p>You scored " + score + "/" + questions.length + "</p>");
    $quiz.hide();
    $results.show();
  }
};

showQuestion(questions[progress]);

$(document).ready(function(){
  $next.hide();
  $results.hide();

  $('body').on('click', '.answer', function(){
    if($(this).html() === questions[progress].correct && running) {
      progress++;
      running = false;
      score++;
      $(this).css('color', 'green');
      $(this).css('border', '3px solid green');
      $(this).css('font-weight', 'bold');
      $next.show();
    } else if ($(this).html() !== questions[progress] && running) {
      $(this).css('color', 'red');
      $(this).css('border', '3px solid red');
      $(this).css('font-weight', 'bold');
      progress++;
      running = false;
      $next.show();
    }
  })

  $next.on('click', function() {
    running = true;
    showQuestion(questions[progress]);
  })
})

<body>
  <main>
    <div class='quiz'>
      <div id='quiz-question'>
      </div>
      <div id='answers'>
      </div>
    </div>
    <div id='results'>
    </div>
  </main>

  <div id='ui'>
    <button id='next'>Next</button>
  </div>

  <script src='https://code.jquery.com/jquery-3.2.1.min.js' integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=' crossorigin='anonymous'></script>
  <script src='includes/js/main.js'></script>
</body>