Jquery一次淡出一个id

一个相当简单的策略是在步骤中有一个名为stepnumber的全局变量和一个数据属性,如下所示：

var stepnumber = 1;

$(function(){
  $('p[data-step-id="' + stepnumber + '"]').show();
  
  $('#nextstep').click(function(){
    $('p[data-step-id="' + stepnumber++ + '"]').fadeOut();
    $('p[data-step-id="' + stepnumber + '"]').fadeIn();
  });
});

.step {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="text1" class="step" data-step-id="1">Step one goes here</p>
<p id="text2" class="step" data-step-id="2">Step two goes here</p>
<p id="text3" class="step" data-step-id="3">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>

这种方法与步骤的结构完全无关 – 它们甚至不必按正确的顺序排列.此方法不需要您的步骤ID.

然而,

我们可以通过假设步骤是有序的来简化这一点.我们可以使用Nth-child CSS选择器来查找下一步,我们可以将其与步骤数进行比较,以查看是否应该再次显示Next Tutorial按钮.

与第一种方法一样,实际上并未使用步骤ID.

var stepnumber = 1;

$(function(){
  $('p.step:nth-child(' + stepnumber + ')').show();
  
  $('#nextstep').click(function(){
    $('p.step:nth-child(' + stepnumber++ + ')').fadeOut();
    $('p.step:nth-child(' + stepnumber + ')').fadeIn();
    if(stepnumber == $('p.step').length) {
      $('#nextstep').hide();
      $('#nexttut').show();
    }
  });
});

.step,#nexttut {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="text1" class="step">Step one goes here</p>
<p id="text2" class="step">Step two goes here</p>
<p id="text3" class="step">Step three goes here</p>
<p id="nextstep"><a href="#">Next Step</a></p>
<p id="nexttut"><a href="tutorial2.html">Next Tutorial</a></p>
</div>

在这两种情况下,我都给了一个常见的CSS类步骤,以便在Javascript中轻松识别它们.