Question

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

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

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>

这里的任何人可以帮助我一点点吗？：）

Answer 1

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

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

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

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

首先隐藏所有div，然后将第1行显示为如下所示的代码。

$(".question-holder").css('display', 'none');
$(".question-holder:first").css('display', 'block');

Answer 2

你最好隐藏所有相关的div，但随后只显示你想要的那个......

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

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

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

Jquery追加和“for”函数

2 个答案: