Question

我有5个带ID的div

<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').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
function toggleAreas() {
  $("#1, #2, #3, #4, #5").toggle();    
}
$(document).ready(function(){    
  setInterval(toggleAreas, 2000);
});

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

$('#1').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();

function toggleAreas() {
  $("#1, #2, #3, #4, #5").toggle();
}
$(document).ready(function() {
  setInterval(toggleAreas, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 1

您可以使用:visible selector选择第一个可见的div，隐藏它，然后选择下一个兄弟元素并显示它：

Example Here

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

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

$('.toggle-areas > div:first').show().nextAll().hide();

function toggleAreas() {
  var $hide = $('.toggle-areas > div:visible').hide();

  if ($hide.next().length) {
    $hide.next().show();
  } else {
    $hide.prevAll().last().show();
  }
}

$(document).ready(function() {
  setInterval(toggleAreas, 1000);
});

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

按顺序切换多个div

1 个答案: