javascript - 如何按顺序在三个或更多 div 之间切换/切换类？

Question

如何通过单击轻松地在序列中的三个或更多 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");
}); 

Answer 1

简单地检查第 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>