Question

我希望有一个简单的预加载Html移动测验，通过jquery使用显示/隐藏div来一次在屏幕上显示一个问题

问题出现在用户需要跳过一两个问题时，如果我应该显示div，我想通过设置标志来做到这一点基于用户选择/选项值/答案

我在这里找到了解决方案，但我真正需要的是一个简单的解决方案用旗帜的方式来知道是否应该显示下一个div q2skipped=true或q2skipped=false

如果没有显示，那么它将去测试q3skipped标志

我在jsfiddle here中做了一个例子：

<div class="question" id="question1">Q.1 Do you like Milk 
    <select name="1" onchange="displayElements(this.value);" >
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option >Goto Next Question</option>
        <option value="q2skipped=true">Skip Next Question</option>
        <option value="q2skipped=true;q3skipped=true">Skip Next 2 Questions</option>
    </select><br>
    <div> 
        <input type="submit" id="button" value="Submit" onclick='doSubmit(this)'>
    </div>
</div>

Answer 1

似乎有必要采用更可重复的方法。对所有问题的所有值进行硬编码是一项烦人的任务，如果您必须创建新的测验，则必须重复这一步。

我不了解您的应用程序的全部范围，但我会给您一些一般性的提示，以帮助您找到更清洁的解决方案。

（1）使用课程设置问题样式。例如，您可以使用以下CSS：

 .answered { background-color: green;  }
 .skipped  { background-color: yellow; }

如果您在回答后隐藏问题，CSS将无关紧要，但它确实有助于证明我的观点。

（2）避免在HTML中使用硬编码值（当然问题编号除外）类似于：

<div class="question" id="question1">Q.1 Do you like Milk 
    <select class="answer">
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option value="skip">Goto Next Question</option>
        <option value="skip_one">Skip Next Question</option>
        <option value="skip_two">Skip Next 2 Questions</option>
    </select><br>
    <div> 
        <input type="submit" value="Submit" onclick='doSubmit(1)'>
    </div>
</div>

我看到你在提交按钮上使用id="button"。这是一个相当糟糕的主意，因为ID应该是唯一的。最好的方法是，如果你不需要，就不要在按钮上提到ID。

另请注意，按钮的onclick事件现在会传递问题的ID。它稍后会变得清晰。

我添加了一个＆＃34;答案＆＃34;选择类，以便稍后轻松检索用户的答案。

我还使用选择按钮省略了onclick和name属性。我不确定onclick事件应该做什么（与这个问题无关？）并且名称属性在这里似乎没有必要（再次，如果它不需要的话，那就不需要了。在这个问题中提到，你可以再添加一次）。

（3）使用javascript / jQuery来定义应该发生的事情。

$(document).ready(function() {
    //These things should occur on page load:

    $(".question").hide(); //Hides all questions
    $("#question1").show(); //Bring back the first question.
});

//The rest will be done in the doSubmit() function:

function doSubmit (questionID) {
    //get the value from the <select> in the div
    var question = $("#question"+questionID);
    var answer = question.find(".answer").val();

    var nextquestionID = 0; //will be set in the switch case.

    switch(answer) {

        case "yes":
            question.addClass("answered");
            nextquestionID = questionID + 1;
            break;

        case "no":
            question.addClass("answered");
            nextquestionID = questionID + 1;
            break;

        case "skip":
            question.addClass("skipped");
            nextquestionID = questionID + 1;
            break;

        case "skip_one":
            question.addClass("skipped");
            var skippedquestionID = questionID + 1; //the next one will be marked as skipped
            $("#question" + skippedquestionID ).addClass("skipped");

            nextquestionID = questionID + 2;

            break;

        case "skip_two":
            question.addClass("skipped");
            var skippedquestionID = questionID + 1; //the next one will be marked as skipped
            $("#question" + skippedquestionID ).addClass("skipped");
            var skippedquestionID_2 = questionID + 2; //also the next one will be marked as skipped
            $("#question" + skippedquestionID_2 ).addClass("skipped");

            nextquestionID = questionID + 3;
            break;

    }

    //Whatever was selected, now the original question must be hidden, and the new question (ID is contained in nextquestionID ) should be shown:
    question.hide();
    $("#question" + nextquestionID).show();
}

这可以让您进一步构建可重复的流程来处理用户的答案。我希望我能够说清楚，以便你理解;如果没有，请随时问： - ）

Answer 2

您可以根据需要使用jquery .addClass（）,. removeClass（）和.hasClass（）函数来装饰div。

即。

  $('#q1').addClass('skipped')    //when they skip a question
  $('#q1').removeClass('skipped') //when they finally answer it

  if ($('#q1').hasClass('skipped')===true) //test if a question was skipped.
  {

  }  .... etc

有没有办法在测验中为div设置简单的标志来隐藏问题？

2 个答案: