Как переключать / переключать классы между тремя или более 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

Это довольно общее

$(".nav").on("click", function() {
  var dir = $(this).is(".next") ? 1 : -1; // which direction are we going?
  var active = $(".box.active").index() - 1;
  var $boxes = $(".box");
  active += (1 * dir);
  if (active < 0) active = $boxes.length - 1; // wrap
  else if (active >= $boxes.length) active = 0;
  $(".box").removeClass("active");
  $(".box").eq(active).addClass("active");
});

.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<br/>
<div class="nav back">Back</div>
<div class="nav next">Next</div>

Answer 2

Просто чтобы проверить, есть ли у 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>

Answer 3

Я создал другое решение, которое получает идентификатор кнопки (который я добавил) и использует его для указания, куда идти.

var box = $('.box');
var maxBoxes = box.length;
$("#nextBtn, #backBtn").click(function() {
  var getBtn = $(this).get(0).id,
    activeBox = $('.box.active'),
    position = activeBox.index();
    activeBox.removeClass('active');
  if (getBtn === 'nextBtn') {
    (position == maxBoxes) ? box.eq(0).addClass('active'): activeBox.next().addClass('active');
  } else {
    (position === 1) ? box.last().addClass('active'): activeBox.prev().addClass('active');
  }
});

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box active">Box 3</div>

<div id="nextBtn" class="next">Next</div>
<div id="backBtn" class="back">Back</div>

Answer 4

Я думаю, что следующее должно быть эффективным, потому что оно не будет делать ненужных проверок.

var last = $(".active")

function toggle(dir){
  var future = last[dir]();
  if(!(future.length && future.hasClass('box'))) {
    return;
  }
  last.toggleClass("active")
  last = future
  last.toggleClass("active");
}

$(".next").click(toggle.bind(void 0, 'next'));
$(".back").click(toggle.bind(void 0, 'prev'));