Javascript 按顺序切换多个div

我有5个身份证

<div id="1" class="div">1</div>
<div id="2" class="div">2</div>
<div id="3" class="div">3</div>
<div id="4" class="div">4</div>
<div id="5" class="div">5</div>

这是在两个div之间切换的好方法，但不适用于多个数字。现在我有了1个div-4 div的序列，而不是只显示和更改一个div（1个、另一个、然后另一个等等）。我做错了什么

$（'#1'）.show（）；
$（'#2'）.hide（）；
$（'#3'）.hide（）；
$（'#4'）.hide（）；
$（'#5'）.hide（）；
函数toggleAreas（）{
$（“#1、#2、#3、#4、#5”）.toggle（）；
}
$（文档）.ready（函数（）{
设定间隔（toggleAreas，2000年）；
});

1.
2.
3.
4.
5
您可以使用选择第一个可见的
div
，隐藏它，然后选择下一个同级元素并显示它：



$（'.toggle areas>div:first'）.show（）.nextAll（）.hide（）；
函数toggleAreas（）{
var$hide=$（'.toggle areas>div:visible'）.hide（）；
if（$hide.next（）.length）{
$hide.next（）.show（）；
}否则{
$hide.prevAll（）.last（）.show（）；
}
}
$（文档）.ready（函数（）{
设定间隔（toggleAreas，1000）；
});

1.
2.
3.
4.
5.
6.
我正在研究您的解决方案，我有一个后续问题-我应该在每个周期对fadeIn或fadeOut div做什么？到目前为止，我尝试的所有操作都导致所有div同时显示。@roonroon没有使用
.hide（）
方法，而是将其替换为
fadeOut（）
，然后将
fadeOut
回调中的其他元素淡入淡出状态-
$('#1').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
function toggleAreas() {
  $("#1, #2, #3, #4, #5").toggle();    
}
$(document).ready(function(){    
  setInterval(toggleAreas, 2000);
});

function toggleAreas() {
  var $hide = $('.toggle-areas > div:visible').hide();

  if ($hide.next().length) {
    $hide.next().show();
  } else {
    $hide.prevAll().last().show();
  }
}