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

【问题标题】：Javascript function not going to the next list on second tryJavascript 函数在第二次尝试时不会进入下一个列表
【发布时间】：2014-06-01 10:43:41
【问题描述】：

我的 javascript 函数有问题。它没有按预期工作。看看这个小提琴 -> 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();
        });
    }
});

看看这个小提琴 -> http://jsfiddle.net/NM3k6/1/ .

【问题讨论】：

你为什么在next()中使用.ready()？
基本上在文档准备好时执行。我应该使用其他东西吗？
事情是在我回到第一个问题并选择答案之后..结果立即显示而没有进入下一个问题。
整个代码都在document.ready处理程序中，为什么你认为你必须在一个只会在之后调用的函数中再做一次？
我知道这是什么东西，你在问题中解释得很清楚，我可以看到它在小提琴中发生。

标签： javascript html list function

【解决方案1】：

简短的回答：你在next() 中增加currentQuestion，但你永远不会在back() 中减少它。

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

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

【讨论】：

【解决方案2】：

用户返回时需要减少currentQuestion：

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

DEMO

【讨论】：