Question

我正在使用Javascript创建测验应用，但无法确定如何在ul中显示多项选择答案。它们目前都出现在一个li中，我需要将它们分开。我还将为每个li添加一个图像，因此设置了HTML和CSS以确保正确显示这些图像。

HTML包含主要作为占位符的文本，我只复制了JS代码中allQuestions数组中的一个问题。

var i = 0;
var j =0;
var allQuestions = [ {
    questionNumber: 1,
    question: 'Who is the most successful manager of Manchester United?',
    options: ['Sir Matt Busby', 'Louis Van Gaal', 'Ryan Giggs', 'Sir Alex Ferguson'],
    answer: 3,
    info: 'Sir Alex Ferguson was the manager of Manchester United for 26 years between 1986 and 2013. During that time he amassed 38 trophies including 13 Premier League titles, five FA Cups and two UEFA Champions League titles. His win rate was nearly 60 per cent, the highest of any manager in the history of the club.'
}];


//start quiz and generate first question//
$('#go').on('click', function() {
    $('.start').hide();
    generateQuestions();

});

function generateQuestions() {
    $('.question-container').fadeIn(1000);
    $('.submit').fadeIn(1000);
    var firstQuestion = allQuestions[i].question;
    $('.question').html(firstQuestion);
    console.log(firstQuestion);
    var firstNumber = allQuestions[i].questionNumber;
    $('.question-number').html("Question" + " " + firstNumber);
    console.log(firstNumber);
    /*var firstOptions = allQuestions[i].options;
      $('li').html(firstOptions);
      console.log(firstOptions);*/
};

//submit answer and show answer modal//
$('.submit').on('click', function() {
    $('.answer-overlay').show();
    submitAnswer();
});

function submitAnswer() {
    $('.answer-overlay').show();
    var currentAnswer = allQuestions[i].answer;
    $('.answer').html(currentAnswer);
    console.log(currentAnswer);
    var currentInfo = allQuestions[i].info;
    $('.answer-info').html(currentInfo);
    console.log(currentInfo);
};

//hide answer modal and show next question//
$('.next-question').on('click', function() {
    nextQuestion();
});

function nextQuestion() {
    $('.answer-overlay').fadeOut(1000);
    if(i>allQuestions.length -1) {
        i=0
    }
    generateQuestions(i);
    i++

    var nextQuestion = allQuestions[i].question;
    $('.question').html(nextQuestion);
    console.log(nextQuestion);
    var nextNumber = allQuestions[i].questionNumber;
    $('.question-number').html("Question" + " " + nextNumber);
    console.log(nextNumber);
    /*var nextOptions = allQuestions[i].options;
      $('li').html(nextOptions);
      console.log(nextOptions);*/
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="question-container" id="question-container">
<h2 class="question-number">Question 1</h2>
<h3 class="question" id="question">Who is the most successful manager of Manchester United?</h3>
<ul class="answers-container" id="answers-container">
	<li class="options" id="pic1">Sir Matt Busby</li>
	<li class="options" id="pic2">Louis Van Gaal</li>
	<li class="options" id="pic3">Ryan Giggs</li>
	<li class="options" id="pic4">Sir Alex Ferguson</li>
</section>

Answer 1

allQuestions[i].options.forEach(function(answer,index){
        $("#pic"+(index +1)).html(answer);
    console.log(answer);
});

单独.forEach通过每个答案。这是JSFiddle

Answer 2

您的代码似乎对我有用。（我在OP中添加了一个可运行的片段供您检查）

修改：好的，我看到这是显示的占位符文字。

$('li').html(firstOptions);是你的问题。您应该循环遍历firstOptions（因为它是一个数组）并分别设置每个li的内容。这同样适用于nextOptions。

下面的内容会起作用。

var i = 0;
var j =0;
var allQuestions = [ {
    questionNumber: 1,
    question: 'Who is the most successful manager of Manchester United?',
    options: ['Sir Matt Busby', 'Louis Van Gaal', 'Ryan Giggs', 'Sir Alex Ferguson'],
    answer: 3,
    info: 'Sir Alex Ferguson was the manager of Manchester United for 26 years between 1986 and 2013. During that time he amassed 38 trophies including 13 Premier League titles, five FA Cups and two UEFA Champions League titles. His win rate was nearly 60 per cent, the highest of any manager in the history of the club.'
}];


//start quiz and generate first question//
$('#go').on('click', function() {
    $('.start').hide();
    generateQuestions();

});

function generateQuestions() {
    $('.question-container').fadeIn(1000);
    $('.submit').fadeIn(1000);
    var firstQuestion = allQuestions[i].question;
    $('.question').html(firstQuestion);
    console.log(firstQuestion);
    var firstNumber = allQuestions[i].questionNumber;
    $('.question-number').html("Question" + " " + firstNumber);
    console.log(firstNumber);
    var firstOptions = allQuestions[i].options;
    var k;
    for (k = 0; k < 4; k++)
      $('#pic'+(k+1)).html(firstOptions[k]);
    console.log(firstOptions);
};

//submit answer and show answer modal//
$('.submit').on('click', function() {
    $('.answer-overlay').show();
    submitAnswer();
});

function submitAnswer() {
    $('.answer-overlay').show();
    var currentAnswer = allQuestions[i].answer;
    $('.answer').html(currentAnswer);
    console.log(currentAnswer);
    var currentInfo = allQuestions[i].info;
    $('.answer-info').html(currentInfo);
    console.log(currentInfo);
};

//hide answer modal and show next question//
$('.next-question').on('click', function() {
    nextQuestion();
});

function nextQuestion() {
    $('.answer-overlay').fadeOut(1000);
    if(i>allQuestions.length -1) {
        i=0
    }
    generateQuestions(i);
    i++

    var nextQuestion = allQuestions[i].question;
    $('.question').html(nextQuestion);
    console.log(nextQuestion);
    var nextNumber = allQuestions[i].questionNumber;
    $('.question-number').html("Question" + " " + nextNumber);
    console.log(nextNumber);
    var nextOptions = allQuestions[i].options;
    var k;
    for (k = 0; k < 4; k++)
      $('#pic'+(k+1)).html(nextOptions[k]);
};

generateQuestions(); // added for snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="question-container" id="question-container">
<h2 class="question-number"></h2>
<h3 class="question" id="question"></h3>
<ul class="answers-container" id="answers-container">
	<li class="options" id="pic1"></li>
	<li class="options" id="pic2"></li>
	<li class="options" id="pic3"></li>
	<li class="options" id="pic4"></li>
</section>

在Javascript中迭代另一个数组中的数组并在UL中显示项目

2 个答案: