我如何实现“目录"?我的测验代码? [英] how do I implement a "table of contents" for my quiz code?
问题描述
我有一个脚本来显示我的测验.一次显示一个问题,当您单击下一步时,旧问题消失,新问题消失.
I have a script to show my quiz. One question is shown at a time, and when you click next the old question fades out and the new question fades in.
我还制作了一个引用问题的表-该表是使用更多js生成的.我想这样做,以便当我单击等问题1"时,当前显示的问题淡出,问题1淡入(我在这里说淡入淡出,但实际上是可以立即看到的动画).如果我单击问题2",除了出现问题2以外,都会发生相同的事情.此表的要点是,因此您可以使用该表浏览所有问题..
I also made a table that references the questions -- the table is generated with more js. I want to make it so that when I click on etc "Question 1", the current displayed question fades out and Question 1 fades in (I'm saying fade here but really the animation is instant as you can tell). If I click on "Question 2" the same thing occurs excepts Question 2 fades in. The point of this table is so you can navigate through all the questions using the table.
我意识到在这种情况下,上一个按钮"会更直观,但是出于各种原因,我不希望使用上一个按钮.
I realize that a "previous button" would be more intuitive in this case, but for various reasons I don't want a previous button.
这是我到目前为止的摘要:
Here's a snippet of what I have so far:
var totalQuestions = $('.questions').length;
var currentQuestion = 0;
var $questions = $('.questions');
$questions.hide();
$($questions[currentQuestion]).fadeIn(0);
$('#btn-next').click(function() {
$($questions[currentQuestion]).fadeOut(0, function() {
currentQuestion++;
if (currentQuestion == totalQuestions) {
//do something here
} else {
$($questions[currentQuestion]).fadeIn(0);
}
});
tableControl(totalQuestions);
})
var tableControl = function(numberOfQuestions) {
for (var i = 0; i < numberOfQuestions; i++) {
$('#quiz-table').append(
"<tr>" +
"<td> <a> Question " + (i + 1) + " </a></td>" +
"</tr>"
);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1>Quiz 1</h1>
</div>
<div class="questions">
<p>Question 1</p>
<form class="options">
<input class="option" type="radio">1<br>
<input class="option" type="radio">2<br>
<input class="option" type="radio">3<br>
<input class="option" type="radio">4</br>
</form>
</div>
<div class="questions">
<p>Question 2</p>
<form class="options">
<input class="option" type="radio">1<br>
<input class="option" type="radio">2<br>
<input class="option" type="radio">3<br>
<input class="option" type="radio">4</br>
</form>
</div>
<div class="questions">
<p>Question 3</p>
<form class="options">
<input class="option" type="radio">1<br>
<input class="option" type="radio">2<br>
<input class="option" type="radio">3<br>
<input class="option" type="radio">4</br>
</form>
</div>
<div class="questions">
<p>Question 4</p>
<form class="options">
<input class="option" type="radio">1<br>
<input class="option" type="radio">2<br>
<input class="option" type="radio">3<br>
<input class="option" type="radio">4</br>
</form>
</div>
<input type="button" id='btn-next' value="Next">
<table id='quiz-table'>
<tr>
<th>Question</th>
</tr>
</table>
推荐答案
您可以使用行索引来引用问题的索引
You can use the row index to reference index of question
$('#quiz-table').on('click', 'tr',function(){
var rowIdx = $(this).index();
// hide all, show the corresponding indexed one
$('.questions').hide().eq(rowIdx-1).fadeIn();
});
这篇关于我如何实现“目录"?我的测验代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!