时间戳

首页 > 解决方案 > 如何通过循环查看多个元素样式的变化？

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

问题描述

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 ？

标签： javascriptjquery

解决方案

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

推荐阅读