Question

我想知道如何做到以下几点。

假设我有4个（或更多）问题。每个问题都有一个或多个子问题和一个复选框。 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的知识，所以我无法自己解决这个问题。

Answer 1

您可以为问题和子问题定义假人（不像“回答”？），就像这样

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

下一步是使用那些dummys。出于性能原因，我们将首先准备它们并立即输出。假设您有包含问题和所有内容的数组（可以从代码中看到结构 - 这只是一个示例）：

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

Answer 2

我在工作中遇到了类似的问题。我通过将问题和答案扔到JSON格式来解决它，这种格式存储在DB中，如下所示：

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

这是模板的一种方式，还有其他方法。事实上，存在处理此问题的库（例如，Moustache.js）。

此外，如果用户禁用了JavaScript，您的用户将无法参加您的调查/测验。我可以逃避我所做的事情，因为它部署在公司环境中，用户无法因组策略而禁用JavaScript。如果您处于类似情况，则可能需要考虑使用服务器端语言来生成HTML。 PHP和ASP.Net都擅长于此（我相信其他人也会这样做，但这些是我经验丰富的两个）。

Answer 3

这是非常糟糕的做法，因为如果客户端禁用了JavaScript，则代码将无法呈现。

相反，使用像PHP

这样的后端语言进行研究

Answer 4

可以使用jQuery或JavaScript执行此操作。但是，如果您决定使用jQuery或JavaScript执行此操作，请计算出您将节省多少时间与其将要花费的所有时间＆＃34;成本＆＃34;你在前端：给用户带来处理负担＆＃39;各自的客户和机器，其中一些可能动力不足;确保您的代码可供移动设备使用;保持jQuery的更新，使其从现在起三年后继续工作;确保它在所有浏览器中显示相同的内容......并且甚至不会触及可访问性问题。

哪个是最适合您的最智能解决方案？对我来说，这似乎并不是真正的节省，它只是为了玩代码玩具而过度工程化。但我可能不了解您项目的所有参数。（有时候，玩代码玩具就足够了，特别是如果它是一个业余爱好，而不是一个客户服务的网站或项目:)）

使用jQuery摆脱html

4 个答案: