javascript - 连续切换 3 个 div 的 "addClass"

Question

这是我的 html:

<div class="button"></div>
<div class="wrapper>
  <div class="something">Hello</div>
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
</div>

通过单击 div“按钮”，我想将类“active”添加到类名称为“box”的第一个 div。如果我再次单击该按钮，我想从框 1 中删除类“事件”并将其添加到框 2。Aso。

稍后，如果框 3 添加了类名“active”，我再次按下 div“按钮”，它应该从头开始。

我尝试过类似的方法，但失败了:

$(".button").click(function() {
    $(this).find(".wrapper").add(".box").toggleClass("active");
});

Answer 1

你需要在 jquery 上使用 css :eq() 选择器或 .eq()

$(document).ready(function(){
  var index = 0; // define index for the first box
  $('.button').on('click',function(){
    $('.wrapper .box').removeClass('active');   // remove class active from all box divs
    $('.wrapper .box:eq('+index+')').addClass('active');  // add class active to the box index we need
    index = (index < $('.wrapper .box').length - 1) ? index +1 : 0;  // if index = the number of box divs add + 1 if not return it back to 0
  }).click(); // if you need to run it onload add .click()
});

.active{
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click</div>
<div class="wrapper">
  <div class="something">Hello</div>
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
</div>