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

时间：2016-07-02 08:36:35

标签： javascript jquery

我有一个脚本来显示我的测验。一次显示一个问题，当您单击下一个时，旧问题将逐渐消失，新问题将逐渐消失。

我还制作了一个引用问题的表 - 该表是用更多的j生成的。我想这样做，以便当我点击“问题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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

你肯定在寻找：

.eq(n) - 这会产生n问题。

首先将questions类添加到<tr>并在tableControl()范围内添加一些变量。点击处理程序也必须在那里。这是一堆代码

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

和example

相关问题
最新问题