Javascript 函数在第二次尝试时不会进入下一个列表

Question

我的 JavaScript 函数有问题。它没有按预期工作。看看这个 fiddle -> http://jsfiddle.net/NM3k6/1/ .

这里我有问题，每个问题有三个选择。如果您按照正常流程选择并回答。它会给你们两个正确的答案。现在这是我的问题，回答第一个问题后，再次导航回第一个问题并选择答案。它会立即显示结果，而无需进入下一个问题。

下面是代码。

<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>

这是脚本..

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

看看这个 fiddle -> http://jsfiddle.net/NM3k6/1/ .

Answer 1

简短回答:您可以在 next() 中递增 currentQuestion，但绝不会在 back() 中递减它。

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

不过，为了获得更好的答案，我建议您将应用了该修复的相同问题提交至 Code Review .