Question

我正在学习Javascritp而我遇到了一个我似乎无法理解的问题。我做了一个简单的测验应用程序。每个问题都在div中，可以是活动的或非活动的。如果div处于活动状态，则问题为红色，如果处于非活动状态，则问题为黑色。

根据此js代码将问题添加到HTML中。

var questionOne = { question: "A?",
                    choices: ["4", "7", "6", "5"],
                    correctAnswer:3 }
var questionTwo = { question: "B?",
                    choices: ["4", "7", "6", "5"],
                    correctAnswer:0 }
var questionThree = { question: "C",
                    choices: ["4", "7", "6", "5"],
                    correctAnswer:2 }
var allQuestions = [questionOne,questionTwo,questionThree]

var questionNumber = 0;
var selectedAnswerValue;
var score = 0;

var main = function() {
  for(var j=0; j<allQuestions.length; j++) {
    var currentQuestion = allQuestions[j];

    var questionDiv = $('<div/>', {
                         "class": ("question" + j + " inactive")
                        });
    questionDiv.appendTo('.form-group');

    var h1Question = $('<h1/>').text(currentQuestion.question);
    h1Question.appendTo(('.question' + j));

    var answersDiv = $('<div/>', {
                       "class": ("answers" + j)
                        });
    answersDiv.appendTo(('.question' + j));


    for(var i=0;i<currentQuestion.choices.length;i++) {
      var radioBtn = $('<div class="radio"><label><input type="radio" name="question' + j + '" value="'
                        + i + '">' + currentQuestion.choices[i]
                        + '</label></div>');
      radioBtn.appendTo(('.answers' + j));
    }

    $('.btn').click(function() {
      var currentActiveQuestion = $('.active');
      var nextQuestion = currentActiveQuestion.next();

      nextQuestion.addClass('active').removeClass('inactive');
      currentActiveQuestion.removeClass('active').addClass('inactive');

    });
  }
};

$(document).ready(main);

此代码还在一个按钮上有一个事件监听器，该按钮在点击时触发，理论上将活动（BLACK）div更改为非活动状态（RED），将下一个（）非活动div更改为活动状态。所以在这种情况下，我想要的是问题A变成红色和所有其他黑色。但相反，只将最后一个元素更改为活动，如下所示：

然后点击一键后按下：

我尝试过很多改动，但似乎没有任何效果。欢迎任何帮助。谢谢！

我的HTML代码是：

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Quiz App</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="quiz.css" rel="stylesheet">
      </head>
      <body>
        <div class="form-group">
          <div class="tittle active">
            <h1>Quiz</h1>
          </div>
        </div>
        <div>
          <button id="btn" type="button" class="btn btn-success">NEXT</button>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="quiz.js"></script>
      </body>
    </html>

由我的js形成的html是这样的：

<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quiz App</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="quiz.css" rel="stylesheet">
  </head>
  <body>
      <div class="form-group">
        <div class="tittle active">
          <h1>Quiz</h1>
        </div>
      <div class="question0 inactive">
        <h1>A?</h1>
        <div class="answers0">
          <div class="radio"><label><input type="radio" name="question0" value="0">4</label></div>
          <div class="radio"><label><input type="radio" name="question0" value="1">7</label></div>
          <div class="radio"><label><input type="radio" name="question0" value="2">6</label></div>
          <div class="radio"><label><input type="radio" name="question0" value="3">5</label></div>
        </div>
      </div>
      <div class="question1 inactive">
        <h1>B?</h1>
        <div class="answers1">
          <div class="radio"><label><input type="radio" name="question1" value="0">4</label></div>
          <div class="radio"><label><input type="radio" name="question1" value="1">7</label></div>
          <div class="radio"><label><input type="radio" name="question1" value="2">6</label></div>
          <div class="radio"><label><input type="radio" name="question1" value="3">5</label></div>
        </div>
      </div>
      <div class="question2 inactive">
        <h1>C</h1>
        <div class="answers2">
          <div class="radio"><label><input type="radio" name="question2" value="0">4</label></div>
          <div class="radio"><label><input type="radio" name="question2" value="1">7</label></div>
          <div class="radio"><label><input type="radio" name="question2" value="2">6</label></div>
          <div class="radio"><label><input type="radio" name="question2" value="3">5</label></div>
        </div>
      </div>
    </div>
    <div>
      <button id="btn" type="button" class="btn btn-success">NEXT</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="quiz.js"></script>
</body></html>

Answer 1

在尝试了几件事之后我终于找到了解决方案：

订购非常重要

解决方案是首先放置按钮的事件监听器，然后动态生成脚本的脚本。像这样：

var main = function() {
  $('#btn').click(function() {
    var currentActiveQuestion = $('.active');
    var nextQuestion = currentActiveQuestion.next();

    currentActiveQuestion.removeClass('active');

    nextQuestion.addClass('active');
  });

  for(var j=0; j<allQuestions.length; j++) {
    var currentQuestion = allQuestions[j];

    var questionDiv = $('<div/>', {
                         "class": ("question" + j)
                        });
    questionDiv.appendTo('.form-group');

    var h1Question = $('<h1/>').text(currentQuestion.question);
    h1Question.appendTo(('.question' + j));

    var answersDiv = $('<div/>', {
                       "class": ("answers" + j)
                        });
    answersDiv.appendTo(('.question' + j));


    for(var i=0;i<currentQuestion.choices.length;i++) {
      var radioBtn = $('<div class="radio"><label><input type="radio" name="question' + j + '" value="'
                        + i + '">' + currentQuestion.choices[i]
                        + '</label></div>');
      radioBtn.appendTo(('.answers' + j));
    }
  }
};

$(document).ready(main);

我不完全确定原因，因为我是初学者，但我无法想象动态生成的元素的scrypt在点击事件之前搞乱了元素的类。

更改next（）元素的类是使用jQuery更改最后一个兄弟的类

1 个答案: