我正在预加载的地方进行移动html5/jquery测验 将来自服务器的所有问题合并到一个html文件中,然后 有按钮可以在问题之间来回移动. 效果很好,但是现在我需要跳过某些问题 如果此人通过无线电回答否",则输入是/否" 问题20,然后是21和22,则无需显示. 我怎样才能做到这一点?这是我一直在使用的代码片段:
I am doing a mobile html5 / jquery quiz where I preload all the questions from the server into one html file, then have buttons to move back and forth between the questions. Works nice, but now I am needing to skip certain questions if the person answers "no" via a radio yes/no input to question 20, then 21 and 22, doesn't need to be shown. How can I do this? this is the code snipplet I been using:
JSFIDDLE:
jsfiddle/gN9Xg/
如果此人对问题1回答否",则想跳过问题2
Want to skip over question 2 if the person answers "no" on question 1
function doSubmit(obj) { $(obj).parents(".question").first().next().show(); $(obj).parents(".question").first().hide(); } <div class="question" id="question11" > <input type="text" name="question11.1" qid="question11" /> <input type=submit id="button" value="Submit" onclick='doSubmit(this)' />推荐答案
要在对HTML进行最少更改的情况下实现此目的,您可以设置一个类,例如会导致跳过的元素的船长",那么元素值将是一个数字,该数字确定要跳过多少个问题.
To achieve such thing with minimal changes to the HTML, you can set a class, e.g. "skipper" for the element that will cause such a skip, then the element value will be a number that determines how many questions to skip.
例如,要使答案为否"导致跳过,请使用以下HTML:
For example to have the answer "No" cause a skip, have such HTML:
<select name="question1.1" class="skipper"> <option name="question1.1" ano="1" qid="question1" value="0" checked/>Yes <option name="question1.1" ano="1" qid="question1" value="1" />No </select>由于您实际上并没有在其他地方使用此值,所以应该没问题.
Since you don't really use this value elsewhere, it should be fine.
现在要使用它,请改用以下代码:
Now to use it, have such code instead:
function doSubmit(obj) { var oQuestion = $(obj).parents(".question").first(); var skipCount = parseInt(oQuestion.find(".skipper").val(), 10); if (isNaN(skipCount) || skipCount < 0) skipCount = 0; var oNext = oQuestion.next(); for (var i = 0; i < skipCount; i++) oNext = oNext.next(); oNext.data("prev_index", oQuestion.index()); oNext.show(); oQuestion.hide(); } function backToPrev(obj) { var oQuestion = $(obj).parents(".question").first(); var index = parseInt(oQuestion.data("prev_index"), 10); if (isNaN(index) || index < 0) oQuestion.prev().show(); else $(".question").eq(index).show(); oQuestion.hide(); }正如您所看到的那样,代码查找"skipper"值,并分配问题的索引以返回.
As you can see, the code look for a "skipper" value and also assign the index of the question to get back to.
更新了小提琴.
更多推荐
如何跳过div?
发布评论