Question

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

看看这个小提琴 - ＆gt; http://jsfiddle.net/NM3k6/1/。

Answer 1

简短回答：你在currentQuestion中增加了next()，但你从未在back()中减少它。

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

对于很多更好的答案，我建议您将同一问题（应用该修复程序）提交给Code Review。

Answer 2

当用户返回时，您需要减少currentQuestion：

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

DEMO

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

2 个答案: