gpt4 book ai didi

javascript - 用jquery选择下一个div?

转载 作者:行者123 更新时间:2023-11-28 13:07:31 24 4
gpt4 key购买 nike

//$(document).ready(function(){
$('.next').click(function(){
$('.box').fadeOut();
$('.box').next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>

<div class="box">
2
</div>

<div class="box">
3
</div>

<div class="box">
4
</div>

我有一个 div .box 和下一个按钮。如果我单击 next 按钮,我需要选择下一个 div,但只有第一个 div 而不是全部。例如,如果我在显示 box 1 时单击 next 按钮,那么应该出现的下一个框是 2 等等。但现在它显示2 3 4。如何做到这一点?

最佳答案

您可以使用 $(.box:visible) 获取第一个可见的 div,然后淡入其下一个 div。您还可以添加对最后一个元素的检查,在这种情况下,您可以淡入第一个元素。像这样的东西:

//$(document).ready(function(){
$('.next').click(function(){
var visibleBox = $('.box:visible');
$(visibleBox).fadeOut();
if(!$(visibleBox).next('div').length)
$('.box').first().fadeIn();
else
$(visibleBox).next().fadeIn();

});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>

<div class="box">
2
</div>

<div class="box">
3
</div>

<div class="box">
4
</div>

关于javascript - 用jquery选择下一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45340499/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com