javascript - 单击按钮即可遍历每个 div 并更改类

Question

嘿哟，

我不知道如何使脚本像这样工作:我想要一个按钮，可以在点击时更改div的类。但我不想让它同时更改所有 div。我只想更改第一次 click 上的第一个 div，第二次 click 上的第二个 div 等等等等。

我已经尝试过但失败了。代码如下:

$('button').click(function() {
  // give first $(.div).addClass('active') on first click, second div on second click ...
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outer">
  
  <div class="inner">
    <div class="div">Somebody</div>
  </div>
  
  <div class="inner">
    <div class="div">once</div>
  </div>
  
  <div class="innner">
    <div class="div">told</div>
  </div>
  
  <div class="inner">
    <div class="div">me</div>
  </div>
  
  <button>Next</button>
  
</div>

Answer 1

使用 .eq 方法，您可以传递所需元素的索引，并且将返回仅包含该元素的 jQuery 集合。从索引 0 开始，每次单击按钮时递增索引，并将类添加到适当的元素:

let i = 0;
$('button').click(function() {
  $('.div').eq(i).addClass('active');
  i++;
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outer">
  
  <div class="inner">
    <div class="div">Somebody</div>
  </div>
  
  <div class="inner">
    <div class="div">once</div>
  </div>
  
  <div class="innner">
    <div class="div">told</div>
  </div>
  
  <div class="inner">
    <div class="div">me</div>
  </div>
  
  <button>Next</button>
  
</div>