Jquery测验只显示第一页和最后一页

您面临的错误是在这一部分。

$('.next-button').on('click', function() {
    console.log('question2');
    indicateStep();
    var q2 = questions[1]; //create the second question with the 0'th element of the Array
    q2.toDOM();
    clickAnswer();
    $('.options').on('click', function() {
        if (q2.check($(this).text()) === true) {
            $('.answer').append('<h2>Your answer is correct!<br>Jean-Paul "Bluey" is the singer of Incognito</h2>');
        } else {
            $('.answer').append('<h2>Your answer is incorrect!<br>Jean-Paul "Bluey" is the singer of Incognito</h2>');
        }
        $('.next-button').show();
    });
    event.preventDefault;
});

$('.next-button').on('click', function() {
    console.log('question3');
    indicateStep();
    var q3 = questions[2]; //create the second question with the 0'th element of the Array
    q3.toDOM();
    clickAnswer();
    $('.options').on('click', function() {
        if (q3.check($(this).text()) === true) {
            $('.answer').append('<h2>Your answer is correct!<br>Michael Jackson sold 42.4 million albűlbums from Thriller</h2>');
        } else {
            $('.answer').append('<h2>Your answer is incorrect!<br>Michael Jackson sold 42.4 million albűlbums from Thriller</h2>');
        }
        $('.next-button').show();
    });
});

这个元素有2个事件处理程序。它总是一直向下移动到最后一个事件。我认为这个事件会为用户加载第四个问题。下面是示例

event triggered...
if answer correct
   load second question
if answer correct
   load third question
if answer corrent
   load fourth question

您没有任何条件要检查，哪个问题已提交，哪个问题下一个加载。您应该试试这段代码，在下面的代码中，我将使用类检查条件，您也可以将条件更改为其他变量。查看用户当前正在处理哪个问题。

$('.next-button').on('click', function() {
   if($(this).attr('class') == 'first-question') { // add condition
    console.log('question2');
    indicateStep();
    var q2 = questions[1]; //create the second question with the 0'th element of the Array
    q2.toDOM();
    clickAnswer();
    $('.options').on('click', function() {
        if (q2.check($(this).text()) === true) {
            $('.answer').append('<h2>Your answer is correct!<br>Jean-Paul "Bluey" is the singer of Incognito</h2>');
        } else {
            $('.answer').append('<h2>Your answer is incorrect!<br>Jean-Paul "Bluey" is the singer of Incognito</h2>');
        }
        $('.next-button').show();
    });
    event.preventDefault;
   } else if ($(this).attr('class') == 'second-question') { // another condition
      // code for second question...
   }
});

…等等。

其次，只是一个建议，而不是一个答案。如果你添加

正确答案||错误答案

当前答案，[name]是《Incognito》的演唱者||错误答案，[name]从未演唱过《Incognito》。

将不同的函数绑定到同一个事件上无法实现连续更新。在用户点击.next-button的那一刻，你应该知道已经通过了哪一步，下一步要显示哪一步(基于某种条件)。

我建议有一些全局变量，如window.current_question_id，这将表明当前位置(这里的其他可能的选择是css类和data属性)。点击.next-button将检查问题编号，并显示下一个问题(如果他们中的任何一个离开)。

看一下我发布的js代码，你会对应该发生的事情有一个基本的了解。

我也会把正确的答案封装在你的问题对象中(当你要求q3.check()时，你已经做了一些)。这将使您不必重复代码(因为q2和q3显示的函数看起来非常相似)。

# we can get rid of three functions for click event
# lets make the signle function responsible for that instead
$('.next-button').on('click', function() {
  # we should know which step we're at.
  # I assume you have window.current_question_id set up
  # and you handle the case of no more questions left by yourself here
  var next_question = questions[window.current_question_id + 1];
  next_question.toDOM();
  clickAnswer();
  $('.options').on('click', function() {
      # lets assume answer is incorrect by default. one less condition!
      var correctness = 'incorrect';
      if (next_question.check($(this).text()) === true) {
        correctness = 'correct';
      }
      var appending_text = '<h2> Your answer is ' + correctness + '!<br>';
      # I noticed you show pretty the same string here regardless of correctness.
      # why not to incapsulate it in your `q` objects so they just return that string?
      appending_text = appending_text + next_question.correct_answer();
      $('.answer').append(appending_text);
      $('.next-button').show();
    });
});