javascript - 如何让div一次显示一个，设置为一个时间

Question

我一直在使用 setInterval 和 setTimeout 来显示一个 div，然后继续显示第二个 div，然后显示第三个(最后一个)。在显示最终的 div 之后，我想循环回到第一个 div 以再次开始切换 div 的过程。

setInterval(function(){ 
  $(".one").toggle(); 
  $(".two").toggle();

}, 5000);

所以我发现这个循环工作得很好，但是当我引入“.third”div 时它跳过了第二个，我非常困惑!!

Answer 1

给它们所有相同的类，并使用每次递增的计数器变量来知道要显示哪个。到达最后一个 div 时使用模数环绕。

var counter = 0;
setInterval(function() {
  $(".class").hide();
  $(".class").eq(counter).show();
  counter = (counter + 1) % $(".class").length;
}, 2000);

.class {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
  Div 1
</div>
<div class="class">
  Div 2
</div>
<div class="class">
  Div 3
</div>
<div class="class">
  Div 4
</div>