我有 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 个 div,然后是另一个 div,然后是另一个 div,依此类推),而是 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>
最佳答案
您可以使用 :visible
selector 选择第一个可见的 div
,隐藏它,然后选择下一个同级元素并显示它:
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>
关于javascript - 按顺序切换多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33861646/