jquery中的循环(使用.each()方法)

Question

为了创建类似钢琴的东西，我编写了以下代码。当您单击一个按钮(#start_img)时，每个.piano div都应该获得press类，在短暂中断之后，它应该再次从其中删除。

然后，该函数应该循环到下一个.piano div，并在那里重复相同的操作。听起来并不太难，唯一的问题是它不工作。有人能给我解释一下代码出了什么问题吗？

​

$('#start_img').on('click', function() {
  $('.piano').each(function(index) {
    $(this).addClass('press').delay(900).removeClass('press');
  });
});

.press {
  background-color: silver;
}
.piano {
  border: 1px solid black;
  display: inline-block;
  width: 20px;
  height: 60px;
}

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

<button id='start_img'>Start</button>

<div id='page'>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
  <div class='piano'></div>
</div>

​

Answer 1

有两个原因。

()仅适用于在内部使用动画队列的方法，循环将立即运行，因此会向每个实例添加相同的延迟，使它们都激活

你可以这样做

piano.each(function(index){
   var $el = $(this);
   setTimeout(function(){
       $el.addClass('press');
       setTimeout(function(){
         $el.removeClass('press');
       }, 880);
   }, (index+1) * 900);// multiply delay by index to increment each one
});

Answer 2

您可以在特定索引处使用具有延迟的setTimeout。

start.on('click', function() {
  var piano = $('.piano');
  piano.each(function(index) {
    var _this = $(this);
    _this.addClass('press');
    setTimeout(function() {
      _this.removeClass('press');
    }, 900 * index);
  });
});