1. 首頁
  2. 問答
  3. 如何「跳轉」到特定元素？

如何「跳轉」到特定元素？

2016-07-02 132 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

相關問題

 相關問題