如何跳过div?

本文介绍了如何跳过div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在预加载的地方进行移动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.

更新了小提琴.