Wie implementiere ich ein "Inhaltsverzeichnis" für meinen Quizcode?

Question

Ich habe ein Skript, um mein Quiz zu zeigen. Eine Frage wird zu einem Zeitpunkt angezeigt, und wenn Sie auf Weiter klicken, blendet die alte Frage aus und die neue Frage wird eingeblendet.

Ich habe auch eine Tabelle erstellt, die auf die Fragen verweist - die Tabelle wird mit mehr js generiert. Ich möchte es so machen, dass, wenn ich auf etc "Frage 1" klicke, die aktuell angezeigte Frage ausgeblendet wird und Frage 1 eingeblendet wird (ich sage hier Fade, aber die Animation ist wirklich augenblicklich, wie Sie sehen können). Wenn ich auf "Frage 2" klicke, passiert das Gleiche. Ausnahmen Frage 2 wird eingeblendet. Der Punkt dieser Tabelle ist so, dass Sie durch alle Fragen navigieren können, indem Sie die Tabelle verwenden.

Ich weiß, dass eine "vorherige Schaltfläche" in diesem Fall intuitiver wäre, aber aus verschiedenen Gründen möchte ich keine vorherige Schaltfläche.

Hier ist ein Ausschnitt von dem, was ich bisher:

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>

Answer 1

Sie den Zeilenindex Index der Frage

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