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

我在工作中遇到了类似的问题。我通过将问题和答案放入存储在数据库中的 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);
};

这是模板的一种方法，还有其他方法。事实上，有一些库可以处理这个问题（例如，Moustache.js）。

此外，如果您的用户禁用了 JavaScript，他们将无法参加您的调查/测验。我可以摆脱我所做的事情，因为它部署在企业环境中，由于组策略，用户无法禁用 JavaScript。如果您没有遇到类似情况，您可能需要考虑使用服务器端语言来生成 HTML。PHP 和 ASP.Net 在这方面都表现出色（我相信其他人也一样，但这是我有经验的两个）。

于 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 更新，以便它在三年后继续工作；确保它在所有浏览器中显示相同......并且甚至不会触及可访问性问题。

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

于 2013-01-16T18:26:55.777 回答
0

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

相反，使用PHP等后端语言进行研究

于 2013-01-16T18:02:36.580 回答