0

以下の作り方を考えてみました。

4 つ (またはそれ以上) の質問があるとします。すべての質問には、1 つ以上のサブ質問とチェックボックスがあります。htmlは次のようになります

<div class="question>
    <p>What kind of fruit do you like?</p>
    <div class="subquestions">
        <p>I like bananas</p><input checkbox>
        <p>I like apples</p><input checkbox>
        <p>I like strawberrys</p><input checkbox>
    </div>
</div>

<div class="question>
    <p>What kind of class do you like?</p>
    <div class="subquestions">
        <p>I like math</p><input checkbox>
        <p>I like biology</p><input checkbox>
    </div>
</div>

<div class="question>
    <p>What kind of sport do you like?</p>
    <div class="subquestions">
        <p>I like football</p><input checkbox>
        <p>I like cricket</p><input checkbox>
        <p>I like tennis</p><input checkbox>
        <p>I like basketball</p><input checkbox>
    </div>
</div>

<div class="question>
    <p>What kind of games do you like?</p>
    <div class="subquestions">
        <p>I like call of duty</p><input checkbox>
        <p>I like battlefield 3</p><input checkbox>
    </div>
</div>

html が 4 回繰り返されていることがわかるように、質問とサブ質問のみが変更されるため、jQuery を使用して html を取り除く方法があるかどうか疑問に思っていました。

<div class="question>
    <p><question_text></p>
    <div class="subquestions">
        <p><subquestion_text></p><input checkbox>
    </div>
</div>

このhtmlをマークアップしてから、変数を使用してデータを入れる関数を作成できるのではないかと考えていました。しかし、私はまだjQueryについて多くのことを学んでいるので、自分で理解することはできません.

4

4 に答える 4

1

私は職場で同様の問題に遭遇しました。次のようにDBに保存されているJSON形式に質問と回答を投げることで解決しました：

QuestionTable
=====================================
QuestionID  QuestionField   JSONField

JSON には、すべてのデフォルト プロパティが含まれています。あなたの場合、最初の質問は次のようにフォーマットされます（ちょっと長いですが、アイデアが伝わることを願っています）：

var objToStringify = {
    "question": "What kind of fruit do you like?",
    "answers": [
        {
            "label": "I like bananas",
            "type": "input",
            "attributes": {
                "type": "checkbox",
                "value": "bananas"
            }
        },
        {
            "label": "I like apples",
            "type": "input",
            "attributes": {
                "type": "checkbox",
                "value": "apples"
            }
        },
        {
            "label": "I like strawberries",
            "type": "input",
            "attributes": {
                "type": "checkbox",
                "value": "strawberries"
            }
        },
    ]
}

次に、質問を作成する jQuery は次のようになります。

var addQuestion = function addQuestion(parsedJSON) {
    var div = $('<div />'),
        p = $('<p />'),
        label = $('<label />'),
        q = div.clone().addClass('question'),
        a = div.clone().addClass('subquestions'),
        ans = {},
        i = 0;
    q.append(p.clone().text(parsedJSON.question));
    if (parsedJSON.answers) {
        for (i = 0; i < parsedJSON.answers; i += 1) {
            ans = parsedJSON.answers[i];
            a.append(
                p.clone().append(
                    label.clone().text(ans.label)
                ).append(
                    $(document.createElement(ans.type)).attr(ans.attributes)
                )
            );
        }
    }
    q.append(a);
    $('#someDOMElement').append(q);
};

これはテンプレートの 1 つの方法であり、他にもあります。実際、これに対処するためのライブラリが存在します (例: Moustache.js )。

また、ユーザーが JavaScript を無効にすると、アンケートやクイズに回答できなくなる懸念もあります。グループ ポリシーが原因でユーザーが JavaScript を無効にできない企業環境に展開されているため、私が行ったことを回避できます。同様の状況にない場合は、代わりにサーバー側言語を使用して HTML を生成することを検討してください。PHP と ASP.Net の両方がこれに優れています (他の人も同様だと確信していますが、これらは私が経験した 2 つです)。

于 2013-01-16T18:27:02.140 に答える
1

このように、質問とサブ質問のダミーを定義できます（「回答」のようなものではありませんか？）

var questionDummy = '<div class="question">'
                  + '<p>[question]</p>'
                  + '<div class="subquestions">[subquestions]</div>'
                  + '</div>',
    subquestionDummy = '<p>[label]</p><input checkbox>';

次のステップは、それらのダミーを使用することです。パフォーマンス上の理由から、最初にそれらを準備し、一度にすべて出力します。質問とすべてを含む配列があるとします (構造はコードから確認できます。これは単なる例です)。

var questions = new Array(yourQuestions.length);
for (var i = 0; i < questions.length; i++) {
    var subquestions = new Array(yourQuestions[i].subquestions.length);
    for (var j = 0; j < subquestions.length; j++) {
        subquestions[j] = subquestionDummy.replace('[label]', yourQuestions[i].subquestions[j].label);
    }

    questions[i] = questionDummy
        .replace('[question]', yourQuestions[i].question)
        .replace('[subquestions]', subquestions.join(''));
}

これで出力できます。jQuery を使用したい場合 (とにかく使用する場合にのみ意味があります。それ以外の場合は、純粋な JavaScript を使用してください。この理由だけで、そのような大きなライブラリをロードする必要はありません!)、次の方法があります。

$('#someDivThatWrapsAllQuestions').html(questions.join(''));
于 2013-01-16T18:03:20.627 に答える
0

jQueryまたはJavaScriptを使用してこれを行うことができます。ただし、jQueryまたはJavaScriptを使用してこれを行う場合は、フロントエンドで「コスト」がかかるすべての時間に対して、どれだけの時間を節約できるかを把握してください。ユーザーのそれぞれのクライアントとマシンに処理の負担がかかります。力不足の可能性があります。コードがモバイルデバイスで使用可能であることを確認します。jQueryを最新の状態に保ち、3年後も機能し続けるようにします。すべてのブラウザで同じように表示されることを確認してください...そしてそれはアクセシビリティの問題にも触れません。

全体的に最も賢いソリューションはどれですか？私には、これは実際には節約ではないように思われます。コード玩具で遊ぶために過剰に設計されているだけです。しかし、私はあなたのプロジェクトのすべてのパラメータを理解していないかもしれません。（そして時々、コードおもちゃで遊ぶことは、特にそれが顧客にサービスを提供するサイトやプロジェクトではなく趣味のためである場合、十分な見返りです:)）

于 2013-01-16T18:26:55.777 に答える
0

クライアントで JavaScript が無効になっていると、コードのレンダリングに失敗するため、これは非常に悪い習慣です。

代わりに、 PHPなどのバックエンド言語を使用して調査します。

于 2013-01-16T18:02:36.580 に答える