1. 首页
  2. 问答
  3. 如何“跳转”到特定元素？

如何“跳转”到特定元素？

2016-07-02 70 views
-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

+0

此阙stion需要演示以获得很好的答案。 – dfsq

+0

你能澄清为什么吗？我认为我提交的代码非常简单。演示会很困难，因为我使用rails自己生成问题。我清理了一些与我的问题无关的代码。 –

回答

1

你需要.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

+0

我想我没有妥善表达我的意图。该表是一个单独的东西。我想要做的事情包括两部分：1.逐个显示我的所有问题，使用next查看下一个问题。 2.有一个表格，可以让我直接跳到任何我想要的问题号码。 我已经完成1.代码工作正常。这是我遇到的第二个问题。那有意义吗？我将添加一个代码片段。 –

+0

我在你的html和我的javascript中添加了一个例子 - 似乎仍然在做你所要求的。你还需要什么？ – mplungjan

+0

如果你想失去按钮，你可以改变点击'$（'。questions'）。click（function（）{' – mplungjan

0

你肯定要关注：

.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

相关问题

 相关问题