1

私はモバイルhtml5/jqueryクイズを行っています。ここでは、サーバーからすべての質問を1つのhtmlファイルにプリロードし、質問間を行き来するボタンがあります。うまく機能しますが、質問20、21、22への入力がラジオで「いいえ」と答えた場合は、特定の質問をスキップする必要があります。表示する必要はありません。
これどうやってするの？これは私が使用しているコードスニペットです：

JSFIDDLE：

http://jsfiddle.net/gN9Xg/

質問1で「いいえ」と答えた場合は質問2をスキップしたい

    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)' />
4

2 に答える 2

0

それぞれの答えは、それが選択されたときに何をすべきかについてのいくつかの指示を必要とします。スキップする回答にdata-next属性を設定し、属性値を次に必要な質問のIDに設定します。

ここで、回答が選択されたら、そのdata-next属性を確認します。存在する場合は、次の質問を選択したIDに設定します。それ以外の場合は、現在と同じように続行します。

バックアップにもいくつかの変更が必要です。style.displayが'none'以外の質問が見つかるまで、スキップして戻る必要があります。

基本的な考え方は、表示スタイル設定を使用して、data-next回答する質問と回答の属性を示し、回答する質問を選択することです。

それがあなたが先に進むことを可能にすることを願っています。

于 2012-10-28T05:42:07.697 に答える
0

HTMLへの最小限の変更でこのようなことを実現するには、クラスを設定できます。たとえば、そのようなスキップを引き起こす要素に「スキッパー」を設定すると、要素の値はスキップする質問の数を決定する数値になります。

たとえば、「いいえ」と答えるとスキップが発生するようにするには、次のような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>

この値は他の場所では実際には使用しないため、問題ないはずです。

今それを使用するには、代わりにそのようなコードを持っています：

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();
}

ご覧のとおり、コードは「スキッパー」値を探し、質問のインデックスを割り当てて戻ります。

フィドルを更新しました。

于 2012-10-28T11:02:20.230 に答える