如何通过单击轻松地在序列中的三个或更多 div 之间切换/切换类?
示例 html:
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="next">Next</div>
<div class="back">Back</div>
这种方式只适用于两个:
$(".next, .back").click(function(){
$(".box").toggleClass("active");
});
最佳答案
简单地检查第 nth-child 是否有事件类和循环。
$(".next").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i+1)%$(".box").length)+1)+")").addClass('active');
return false;
}
});
});
$(".back").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i-1)+$(".box").length)%$(".box").length+1)+")").addClass('active');
return false;
}
});
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="back">Back</div>
<div class="next">Next</div>
</div>
关于javascript - 如何按顺序在三个或更多 div 之间切换/切换类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58024796/