Question

我点击下面的代码块，当我点击测验中的下一个按钮转到下一个问题时，我正在使用该代码块。每个.questionContainer div中有4个可能的答案（输入单选按钮），其中5个问题有5个。

我想允许用户点击特定的问题编号，然后转到该问题。 .next（）代码行正常工作以前进到下一个问题和可能的回答，但我注释掉的行不起作用。我究竟做错了什么？？？感谢

$('.btnNext').click(function(){
    $(this).parents('.questionContainer').fadeOut(500, function(){
        $(this).next().fadeIn(500);
    //$(this).eq(1).fadeIn(500);
    });

});

Answer 1

我建议使用：

$('.questionContainer').eq($(this).index()).fadeIn(500);

这假设您单击a（或其他元素），其中包含与每个应显示的.questionContainer元素对应的兄弟元素，类似于：

<div id="wrapper">
    <div class="questionContainer">
        <!-- question one -->
    </div>
    <div class="questionContainer">
        <!-- question two -->
    </div>
    <div class="questionContainer">
        <!-- question three -->
    </div>
    <div class="questionContainer">
        <!-- question four -->
    </div>
    <div class="questionContainer">
        <!-- question five -->
    </div>
</div>

<div id="buttons">
    <a href="#">Question 1</a>
    <a href="#">Question 2</a>
    <a href="#">Question 3</a>
    <a href="#">Question 4</a>
    <a href="#">Question 5</a>
</div>

如果您单击的元素不是兄弟，则可以将选择器传递给index()方法以查找正确的索引。这可以是任何CSS类型选择器，基于类名，元素类型，父类......等。

你的第一段代码没有，无法工作的原因是$(this)（和this），只能引用一个元素/ DOM节点，因此this（和$(this)）始终具有隐式索引0（是一组中的第一个也是唯一的元素）。

参考文献：

index()。

Answer 2

您可能还想尝试使用通配符“$”，它告诉jQuery匹配任何以$结尾的id;并设置问题的div ids =“q1”到“q5”：

  var q_nbr = 1 //create a variable in the global scope for the question number
  $(function() {
    $("#btnNext").click(
      function() {
        $("[id$=" + q_nbr + "]").fadeOut(500); // you may wish to omit this
        q_nbr++
        $("[id$=" + q_nbr + "]").fadeIn(500);
      }
    );
  });

使用Jquery eq（）获取特定的DIV？

2 个答案: