Javascript函数第二次尝试时不会转到下一个列表

Question

I have problem with my javascript function. It is not working as expected. Look at this fiddle ->

Here I have questions with three selection each. If you select and answer through the normal flow. It will give you both the 2 correct answer. Now here is my problem, After you answer the first question, navigate back to first question again and select answer. It will right away show result without going to the next question.

Below is the code.

<center>
<div id="your-curve-id">
  <fieldset class="questions" style="border: 1px solid #000; width:500px; margin: 20px">
    <h2 id="p1">1. Please select your Curve Id 1</h2>
    <ul id="ul1">
      <li class="option" name="Curve Id 1" value='Select 1A'>Answer 1</li>
      <li class="option" name="Curve Id 1" value='Select 1B'>Answer 2</li>
      <li class="option" name="Curve Id 1" value='Select 1C'>Answer 3</li>
    </ul>
  </fieldset>
  <fieldset class="questions" style="border: 1px solid #000; width:500px; margin: 20px">
    <h2 id="p2">2. Please select your Curve Id 2</h2>
    <ul id="ul2">
      <li class="option" name="Curve Id 2" value='Select 2A'>Answer 1</li>
      <li class="option" name="Curve Id 2" value='Select 2B'>Answer 2</li>
      <li class="option" name="Curve Id 2" value='Select 2C'>Answer 3</li>
    </ul>
  </fieldset>
</div>
</center>
<div id="results"></div>

here's the script..

$(document).ready(function(){
    answers = new Object();
    var totalQuestions = $('.questions').size();

    $('.option').click(function(){
        console.log($(this).attr('value'));
        var answer = ($(this).attr('value'));
        var question = ($(this).attr('name'));
        answers[question] = answer;
        $('#count').html(Object.keys(answers).length + " / " + totalQuestions);
        next();
        back();
    });

    var currentQuestion = 0;
    $questions = $('.questions');
    $('ul#ul2').hide();

    function next(){
        $($questions.get(currentQuestion)).ready(function(){
            currentQuestion = currentQuestion + 1;
            if(currentQuestion == totalQuestions){
                //do stuff with the result
                var result = values();
                $('div#your-curve-id').hide();
                $('#results').html(result);

            }else{
                $($questions.get(currentQuestion)).show();
                $('ul#ul1').hide();
                $('ul#ul2').show('slow');
            }
        }); 
    }

    function values(){
        var res = "";
        var imahe = "";
        for (questions in answers)
        {
            if (answers.hasOwnProperty(questions)) {
                res += questions + '::' + answers[questions] + '<br />' + '<br />';
            }
        }
        return res;
    }

    function back(){
        $('h2#p1').click(function() {
            $('ul#ul1').show('slow');
            $('ul#ul2').hide();
        });
    }
});

Look at this fiddle ->

Answer 1

Short answer: you increment currentQuestion in next() , but you never decrement it in back() .

  function back() {
    $('h2#p1').click(function() {
      currentQuestion--;
      $('ul#ul1').show('slow');
      $('ul#ul2').hide();
    });
  }

For a much better answer, though, I suggest that you submit the same question, with that fix applied, to Code Review .

Answer 2

You need to reduce currentQuestion when the user goes back:

function back(){
    $('h2#p1').click(function() {
        currentQuestion--;
        $('ul#ul1').show('slow');
        $('ul#ul2').hide();
    });
}

DEMO