如何跳过div? [英] How to Skip over divs?

问题描述

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

http://jsfiddle.net/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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！