我如何“跳"起来特定元素? [英] how do I "jump" to a specific element?
本文介绍了我如何“跳"起来特定元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个脚本来显示我的测验.一次显示一个问题，当您单击下一步时，旧问题消失，新问题消失.
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. I can't figure out how to do this without doing something extremely convoluted. Any thoughts on how I can achieve this?
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>
推荐答案
您需要.eq(currentQuestion)
You need .eq(currentQuestion)
我清理了一下，当我发现您需要一个导航表时，我也将其修复
I cleaned up and when I figured out you needed a nav table, I fixed that too
$(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>
这篇关于我如何“跳"起来特定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
