我如何“跳"起来特定元素?

本文介绍了我如何“跳"起来特定元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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>

这篇关于我如何“跳"起来特定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！