javascript - 如何通过循环查看多个元素样式的变化？

Question

for(i = 0; i <= 5; i++){
  $('div').css({'color': 'black'})
  $('#' + i).css({'color': 'red'})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>

如果我使用这个，我只能看到最后一个 div 改变颜色，我怎样才能制作循环，以便我可以看到每个 div 改变颜色，看到 1 变成红色，然后 2，然后 3 等等，直到 5 ？

Answer 1

您需要setTimeout

for(let i = 0; i <= 5; i++){
  setTimeout(() => {
    $('div').css({'color': 'black'})
    $('#' + i).css({'color': 'red'})
  }, 250 * i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>