Question

Heyo，

我无法弄清楚如何使脚本像这样工作：我想要一个按钮来更改div上click的类。但是我不想让它同时更改所有div。我只想在第一个div上更改第一个click，在第二个div上更改第二个click，依此类推。

我已经尝试过了，但是失败了。代码如下：

$('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>

Answer 2

这里有一个衬里，它抓住了第一个没有active类的元素。

$('button').click(function() {
  $('.div:not(.active):first').addClass('active');
});

.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 3

您可以找到第一个元素，并在其上添加active类。然后旋转课程，依此类推。

$('button').click(function() {
  var activeElem = $('.outer').find('.inner.active');
  if(activeElem.length){
    activeElem.removeClass('active');
    activeElem.next('.inner').addClass('active');
  } else {
    $('.outer').find('.inner').first().addClass('active');
  }
});

.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="inner">
    <div class="div">told</div>
  </div>

  <div class="inner">
    <div class="div">me</div>
  </div>

  <button>Next</button>

</div>

Answer 4

每次点击的增量并应用：

var count = 0;

$('button').click(function() {
  $('.inner:eq('+count+')').addClass('active');
  count++;
});

.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="inner">
    <div class="div">told</div>
  </div>

  <div class="inner">
    <div class="div">me</div>
  </div>

  <button>Next</button>

通过每个div并在Button单击上更改类

4 个答案: