Question

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

我还制作了一个引用问题的表 - 该表是用更多的j生成的。我想这样做，以便当我点击等＆＃34;问题1＆＃34;时，当前显示的问题逐渐淡出，问题1淡入（我说这里有褪色，但实际上动画是即时的，因为你可以告诉）。如果我点击＆＃34;问题2＆＃34;同样的事情发生除了问题2淡入。这个表的重点是你可以使用表浏览所有问题。

我意识到＆＃34;之前的按钮＆＃34;在这种情况下会更直观，但出于各种原因，我不想要一个前一个按钮。

这是我到目前为止的一小部分：

＆＃13;

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>" +

      "</tr>"

    );

  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <h1>Quiz 1</h1>
</div>
<div class="questions">
    <p>Question 1</p>
    <form class="options">
        <input class="option" type="radio">1<br>
        <input class="option" type="radio">2<br>
        <input class="option" type="radio">3<br>
        <input class="option" type="radio">4</br>
    </form>
</div>
<div class="questions">
    <p>Question 2</p>
    <form class="options">
        <input class="option" type="radio">1<br>
        <input class="option" type="radio">2<br>
        <input class="option" type="radio">3<br>
        <input class="option" type="radio">4</br>
    </form>
</div>
<div class="questions">
    <p>Question 3</p>
    <form class="options">
        <input class="option" type="radio">1<br>
        <input class="option" type="radio">2<br>
        <input class="option" type="radio">3<br>
        <input class="option" type="radio">4</br>
    </form>
</div>
<div class="questions">
    <p>Question 4</p>
    <form class="options">
        <input class="option" type="radio">1<br>
        <input class="option" type="radio">2<br>
        <input class="option" type="radio">3<br>
        <input class="option" type="radio">4</br>
    </form>
</div>
<input type="button" id='btn-next' value="Next">
<table id='quiz-table'>
  <tr>
    <th>Question</th>

  </tr>

</table>

＆＃13;

Answer 1

您可以使用行索引来引用问题索引

$('#quiz-table').on('click', 'tr',function(){
    var rowIdx = $(this).index();
    // hide all, show the corresponding indexed one
    $('.questions').hide().eq(rowIdx-1).fadeIn();
});

我如何实现一个＆＃34;目录＆＃34;我的测验代码？

1 个答案: