我想要一个简单的预加载Html移动测验，通过jQuery使用显示/隐藏div 在屏幕上一次显示一个问题
当用户需要跳过一两个问题时，问题就出现了，我想通过设置标志来实现这一点，如果我应该显示或不显示div根据用户选择/选项值/回答
我在这里找到了解决方案，但我真正需要的是使用标志来确定是否应显示下一个div的方法q2skipped=true或q2skipped=false
如果它没有显示，那么它将去测试q3skipped标志
我在jsfiddle中做了一个例子：
<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>
似乎需要一种更可重复的方法。对所有问题的所有值进行硬编码是一项令人讨厌的任务，如果你必须创建一个新的测验，你必须重复这一点。
我不了解你的全部应用范围，但我会给你一些一般的提示，帮助你走上更清洁的解决方案的道路。
(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。稍后会清楚的。
我在select中添加了一个"answer"类，这样以后就可以很容易地检索用户的答案
我还省略了带有select按钮的onclick和name属性。我不确定onclick事件应该做什么(与这个问题无关？)并且name属性在这里似乎并不是真正必要的(同样，如果这个问题中没有提到的东西需要它，你可以再次添加它)。
(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();
}
这将使您进一步构建一个可重复的处理用户答案的过程。我希望我能把它说得足够清楚，让你理解；如果没有，请随意询问：-)
您可以根据需要使用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