Question

我正在创建一个测验。有4个问题，每个问题有4个答案。问题是，在加载第一个问题并选择答案并按下一个按钮后，最后一个问题将加载而不是第二个问题。我怎么能停止执行？或者代码有什么问题？

你能帮我吗？

以下是代码：

q1.toDOM();
    clickAnswer();

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

        if (q1.check($(this).text()) === true) { // q1 check method's actual parameter (the answer which was selected by user), $(this).text()= answer
            $('.answer').append('<h2>Your answer is correct!<br>Rolling Stones was established in 1962.</h2>');
        } else {
            $('.answer').append('<h2>Your answer is incorrect!<br>Rolling Stones was established in 1962.</h2>');
        }
        $('.next-button').show();
    });

    $('.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();
        });
    });

Answer 1

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

$('.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...
   }
});

......等等。

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

，这将是一个很好的用户体验

正确回答||错误答案

而不是

Corrent回答，[姓名]是Incognito ||的歌手错误的答案，[名称]从未唱过隐姓埋名。

长期失误或长期胜利并不好！你应该尽量减少它们。

Answer 2

通过将不同的功能绑定到同一事件，您无法实现连续更新。在用户点击.next-button时，您应该知道哪个步骤已通过，哪个步骤显示下一个（基于某种条件）。

我建议使用某种全局变量，例如window.current_question_id，它表示当前位置（这里的其他可能选项是css类和data属性）。点击.next-button会检查问题编号并显示下一个问题（如果还有其中任何问题）。

查看我发布的js fiddle，了解应该发生的事情。

我还会在你的问题对象中包含正确的答案（因为你在询问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();
    });
});

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

2 个答案: