如何为我的测验代码实现“目录”？

我有一个脚本来显示我的测验。 一次显示一个问题，当您单击下一个问题时，旧问题将淡出，新问题将逐渐消失。

我还制作了一个引用问题的表 – 该表是用更多的j生成的。 我想这样做，以便当我点击“问题1”时，当前显示的问题逐渐淡出，问题1淡入（我说这里消失了，但实际上动画是即时的，你可以告诉）。 如果我点击“问题2”同样的事情发生除了问题2淡入。 这个表的重点是你可以使用表格浏览所有问题 。

在这种情况下，我意识到“前一个按钮”会更直观，但出于各种原因，我不想要前一个按钮。

这是我到目前为止的一个片段：

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( "" + "  Question " + (i + 1) + " " + "" ); } } 

  
 
Quiz 1
 
 
 
Question 1
 
 1
 2
 3
 4
 
 
 
 
Question 2
 
 1
 2
 3
 4
 
 
 
 
Question 3
 
 1
 2
 3
 4
 
 
 
 
Question 4
 
 1
 2
 3
 4
 
 
  
 
 
Question
 
  

Answer 1

您可以使用行索引来引用问题索引

 $('#quiz-table').on('click', 'tr',function(){ var rowIdx = $(this).index(); // hide all, show the corresponding indexed one $('.questions').hide().eq(rowIdx-1).fadeIn(); });