Question

我有一系列的跨度，我想顺序淡出。我尝试使用for循环来遍历跨度，通过添加一个show类（更改可见性）并在循环内使用setTimeout来稍微延迟每个span上添加的类来显示它们。它似乎只是添加＆＃39; show＆＃39;类到div的最后一个跨度，但它尝试将它添加到一个跨度6次（它控制台记录相同的span类六次）。

（我使用javascript而不是jquery来添加类，因为我得到一个错误，即currentSeat.addClass不是一个函数 - 另一件事我无法弄清楚）

我做错了什么？

提前致谢！

＆＃13;

var seat = $('.seat-fillup span');
for (var i = 0; i < seat.length; i++) {
  var currentSeat = seat[i];
  setTimeout(function(){
    currentSeat.classList.add('show');
  }, 50 * i);
}

＆＃13;

.seat-fillup span {
  visibility: hidden;
}
.seat-fillup span.show {
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seat-fillup">
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
</div>

＆＃13;

Answer 1

您需要使用闭包并使用.eq()来获取元素

jQuery(function($) {
  var seat = $('.seat-fillup span');
  for (var i = 0; i < seat.length; i++) {
    (function(index) {
      setTimeout(function() {
        seat.eq(index).addClass('show');
      }, 500 * index);
    })(i)
  }
})

.seat-fillup span {
  visibility: hidden;
}
.seat-fillup span.show {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seat-fillup">
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
  <span>Image here</span>
</div>

Answer 2

你想做(function(e){setTimeout(function(){ e.classList.add('show'); }, 50 * i);})(currentSeat);

按顺序将类添加到一系列元素中

2 个答案: