如何看到多个元素的样式发生循环变化?

问题描述

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为止?

If I'm using this I only see the last div change color, how can I make the loop so I can see every div change color, see 1 turn red, then 2, then 3 and so on until 5 ?

推荐答案

您需要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>

这篇关于如何看到多个元素的样式发生循环变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！