Как я могу «перейти» к определенному элементу?

-3

У меня есть сценарий, чтобы показать свою викторину. Один вопрос показывается одновременно, и когда вы нажимаете дальше, старый вопрос исчезает, и новый вопрос исчезает.Как я могу «перейти» к определенному элементу?

Я также создал таблицу, которая ссылается на вопросы - таблица генерируется с большим количеством js. Я хочу сделать так, чтобы, когда я нажимаю на «Вопрос 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(
 

 
     "<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>

источник

2016-07-02 Jeff Burghess

Этот que Для хорошего ответа нужна демонстрация. – dfsq

Можете ли вы объяснить, почему? Я думал, что код, который я представил, был довольно прост. Демонстрация будет сложной, потому что я сам создаю вопросы, используя рельсы. Я очистил кусочки кода, которые не имели отношения к моему вопросу. –

Вам нужно .eq (currentQuestion)

я вымыл и когда я понял, вам нужен стол нав, я установил, что слишком

$(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>

источник

2016-07-02 09:00:35 mplungjan

Я думаю, что я не выразил свои намерения должным образом. Стол - отдельная вещь. Для того, что я хочу сделать, есть две части: 1. Покажите все мои вопросы один за другим, используя следующий, чтобы перейти к следующему вопросу. 2. У вас есть таблица, которая позволяет мне напрямую пропустить любой номер вопроса, который я хочу. Я уже закончил 1. Код работает нормально. Это было №2, с которыми я столкнулся. Имеет ли это смысл? Я добавлю фрагмент кода. –

Я добавил пример с вашим html и моим javascript - все еще, кажется, делает то, что вы просите. Что еще тебе нужно? – mplungjan

Если вы хотите потерять кнопку, вы можете изменить клик на '$ ('. Questions'). Click (function() {' – mplungjan

Вы определенно ищете:

.eq(n) - это получит n вопрос.

Прежде всего добавьте questions класс в <tr> и добавьте переменную в области tableControl(). Также должен быть обработчик кликов. Вот куча кода

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

и example

источник

2016-07-02 08:57:43 vladkras

Как я могу «перейти» к определенному элементу?

ответ

Смежные вопросы