Comment puis-je "sauter" à un élément spécifique?

J'ai un script pour montrer mon quiz. Une question est affichée à la fois, et lorsque vous cliquez sur la prochaine question, la vieille question disparaît et la nouvelle question s'efface.

J'ai également fait une table qui fait référence aux questions – la table est générée avec plus de js. Je veux le faire de sorte que lorsque je clique sur etc "Question 1", la question affichée actuelle s'efface et la Question 1 disparaît (je dis disparaître ici mais vraiment l'animation est instantanée comme vous pouvez le dire). Si je clique sur "Question 2", la même chose se produit, sauf que la Question 2 s'efface. Je ne peux pas comprendre comment faire cela sans faire quelque chose de très compliqué. Des idées sur la façon dont je peux y parvenir?

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>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "</tr>" ); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questions"> <label for="submitted_quiz_Quiz 1 Question 1">Quiz 1 question 1</label> <input value="4" type="hidden" name="submitted_quiz[submitted_answers_attributes][0][question_id]" id="submitted_quiz_submitted_answers_attributes_0_question_id" /> <div class='options'> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 1" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1">Quiz 1 question 1 answer 1</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 2" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_2" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_2">Quiz 1 question 1 answer 2</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 3" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_3" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_3">Quiz 1 question 1 answer 3</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 4" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_4" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_4">Quiz 1 question 1 answer 4</label> </div> </div> </div> <div class="questions"> <label for="submitted_quiz_Quiz 1 Question 2">Quiz 1 question 2</label> <input value="5" type="hidden" name="submitted_quiz[submitted_answers_attributes][1][question_id]" id="submitted_quiz_submitted_answers_attributes_1_question_id" /> <div class='options'> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 1" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_1" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_1">Quiz 1 question 2 answer 1</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 2" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_2" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_2">Quiz 1 question 2 answer 2</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 3" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_3" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_3">Quiz 1 question 2 answer 3</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 4" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_4" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_4">Quiz 1 question 2 answer 4</label> </div> </div> </div> <div class="questions"> <label for="submitted_quiz_Quiz 1 Question 3">Quiz 1 question 3</label> <input value="6" type="hidden" name="submitted_quiz[submitted_answers_attributes][2][question_id]" id="submitted_quiz_submitted_answers_attributes_2_question_id" /> <div class='options'> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 1" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_1" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_1">Quiz 1 question 3 answer 1</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 2" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_2" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_2">Quiz 1 question 3 answer 2</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 3" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_3" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_3">Quiz 1 question 3 answer 3</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 4" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_4" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_4">Quiz 1 question 3 answer 4</label> </div> </div> </div> </form> <input type="button" id='btn-next' value="Next"> <table id='quiz-table'> <tr> <th>Question</th> <th>Marked</th> <th>Completed</th> <th>Skipped</th> </tr> </table> </div> </div>

Vous avez besoin de .eq (CurrentQuestion)

J'ai nettoyé et quand j'ai compris que vous aviez besoin d'une table de navigation, j'ai également réglé cela

 $(function() { var $questions = $('.questions'), totalQuestions = $questions.length, currentQuestion = 0; tableControl(totalQuestions); $questions.hide(); $questions.eq(currentQuestion).fadeIn(0); $('#btn-next').click(function() { $questions.eq(currentQuestion).fadeOut(0, function() { currentQuestion++; if (currentQuestion == totalQuestions) { console.log("DONE"); } else { $questions.eq(currentQuestion).fadeIn(0); } }); }); $('#quiz-table').on("click",".nav",function(e) { e.preventDefault(); var clicked=$(this).data("id"); // or the clicked TR if there is a one to one match $questions.eq(currentQuestion).fadeOut(0, function() { currentQuestion=clicked; $questions.eq(clicked).fadeIn(0); }); }); }) var tableControl = function(numberOfQuestions) { for (var i = 0; i < numberOfQuestions; i++) { $('#quiz-table').append( "<tr>" + "<td> <a class='nav' href='#' data-id="+i+"> Question " + (i + 1) + " </a></td>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "</tr>" ); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="questions"> <label for="submitted_quiz_Quiz 1 Question 1">Quiz 1 question 1</label> <input value="4" type="hidden" name="submitted_quiz[submitted_answers_attributes][0][question_id]" id="submitted_quiz_submitted_answers_attributes_0_question_id" /> <div class='options'> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 1" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1">Quiz 1 question 1 answer 1</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 2" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_2" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_2">Quiz 1 question 1 answer 2</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 3" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_3" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_3">Quiz 1 question 1 answer 3</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 1 Answer 4" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_4" /> <label for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_4">Quiz 1 question 1 answer 4</label> </div> </div> </div> <div class="questions"> <label for="submitted_quiz_Quiz 1 Question 2">Quiz 1 question 2</label> <input value="5" type="hidden" name="submitted_quiz[submitted_answers_attributes][1][question_id]" id="submitted_quiz_submitted_answers_attributes_1_question_id" /> <div class='options'> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 1" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_1" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_1">Quiz 1 question 2 answer 1</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 2" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_2" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_2">Quiz 1 question 2 answer 2</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 3" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_3" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_3">Quiz 1 question 2 answer 3</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 2 Answer 4" name="submitted_quiz[submitted_answers_attributes][1][content]" id="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_4" /> <label for="submitted_quiz_submitted_answers_attributes_1_content_quiz_1_question_2_answer_4">Quiz 1 question 2 answer 4</label> </div> </div> </div> <div class="questions"> <label for="submitted_quiz_Quiz 1 Question 3">Quiz 1 question 3</label> <input value="6" type="hidden" name="submitted_quiz[submitted_answers_attributes][2][question_id]" id="submitted_quiz_submitted_answers_attributes_2_question_id" /> <div class='options'> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 1" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_1" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_1">Quiz 1 question 3 answer 1</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 2" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_2" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_2">Quiz 1 question 3 answer 2</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 3" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_3" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_3">Quiz 1 question 3 answer 3</label> </div> <div class='radio'> <input type="radio" value="Quiz 1 Question 3 Answer 4" name="submitted_quiz[submitted_answers_attributes][2][content]" id="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_4" /> <label for="submitted_quiz_submitted_answers_attributes_2_content_quiz_1_question_3_answer_4">Quiz 1 question 3 answer 4</label> </div> </div> </div> </form> <input type="button" id='btn-next' value="Next"> <table id='quiz-table'> <tr> <th>Question</th> <th>Marked</th> <th>Completed</th> <th>Skipped</th> </tr> </table> </div> </div>

Vous recherchez certainement:

.eq (n) – cela obtiendra une question.

Tout d'abord, ajoutez des questions à <tr> et ajoutez une variable dans scope of tableControl() . Le gestionnaire de clics doit également être là. Voici un tas de code

 var current = 0; $('#btn-next').click(function () { $('.questions').eq(current).fadeOut(); current++; $('.questions').eq(current).fadeIn(); });

Et exemple