0

我制作了一个测验创建者，但现在我正试图将其中的信息提取到“前端”测验中。

我正在尝试构建这样的 for 循环。并且在这里尝试将类 '.hide' 添加到所有具有类 '.question-holder' 的 div 中，但第一个创建的除外。

for(var i = 0; i < questions.length; i++) 
{
    var q = questions[i];
    var answers = q.getAnswers();
    $(".question-holder").append("<h2 id='QuizQuestionHeadline'>" + q.getQuestion() + "</h2><div class='question-wrap'></div>");            
    $(".question-wrap").append("<ul class='answers' id='quiz-answers'></ul>");          

    for(var n = 0; n < answers.length; n++)
    {
        $("#quiz-answers").append("<li><input tabindex='1' type='checkbox' id='input-1'><label for='input-1'><span>"+ answers[n].getAnswer() +"</span></label></li>");          
    };
};      

for(var i = 2; i < questions.length; i++) 
{
    $(".question-holder").addClass('hide');         
};

上面代码创建的最终 HTML 应该是：

<div class="question-holder">

<h2 id='QuizQuestionHeadline'>The Question</h2>
      <ul id='quiz-answers' class="answers">
        <li>
          <input tabindex="1" type="radio" id="input-1" name="quiz-radio">
          <label for="input-1"><span>Answer 1</span></label>
        </li>
        <li>
          <input tabindex="2" type="radio" id="input-2" name="quiz-radio" checked>
          <label for="input-2"><span>Answer 2</span></label>
        </li>
      </ul>
</div>

这里有人可以帮助我吗？:)

4

2 回答 2

3

请注意，这$(".question-holder").addClass('hide');将隐藏所有带有 class 的 div question-holder。所以 for 循环在这里没有任何意义。

for(var i = 2; i < questions.length; i++) {
    $(".question-holder").addClass('hide');         
};

您可以为每个 div 使用不同的 id，然后将此 addClasshide 用于除第一个 div 之外的所有 div。

另一个简单的解决方案是：

首先隐藏所有 div，然后显示第一行，如下所示。

$(".question-holder").css('display', 'none');
$(".question-holder:first").css('display', 'block');
于 2013-05-01T14:26:10.773 回答
0

你最好还是隐藏所有相关的 div，然后只显示你想要的任何一个......

var index = 0; // 0 based, so 0 is the first question

$(".question-holder").addClass("hide");
$(".question-holder").eq(index).removeClass("hide");

您只需要更新index变量并再次运行该代码以显示特定问题:)

于 2013-05-01T14:36:26.090 回答