JQuery - Class：如何在序列中的 3 个或更多标签之间切换/切换类？

Question

How can I easily toggle/switch the classes between three or more divs in a sequence by click?

Example 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>

This way just works with two:

$(".next, .back").click(function(){
  $(".box").toggleClass("active");
}); 

Answer 1

Simply to check if nth-child has the active class and loop.

 $(".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 2

This is pretty generic

 $(".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 3

I've created another solution that gets the button's ID (which I've added) and uses that to dictate where to go.

 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

I think that the following should be efficient, because it will not do unnecessary checks.

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'));