javascript - 在 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

两个原因。

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

你可以做类似的事情

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