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？ / p>

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>

Answer 2

您的循环几乎立即发生。使用setTimeout / setInterval添加一些时间来查看更改：

var i = 1;
var interval;

interval = setInterval(loop, 1000);

function loop() {
  $('div').css({'color': 'black'});
  $('#' + i).css({'color': 'red'});

  i++;
  
  if (i > 5) {
    clearInterval(interval);
  }
}

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

Answer 3

您的循环几乎立即发生。使用<b-form-checkbox class="checkbox" v-model="small">small</b-form-checkbox> <style> .checkbox:checked+label:before { background-color: palegreen !important; } </style> / setTimeout添加一些时间来查看更改：

setInterval

setInterval(function(){
                   var $active = $('ul.cur-item li.active').removeClass('active').next('li');
                   $active.removeClass('active');
                   
                   if (!$active.length) $active = $active.prevObject.siblings(':first');
                   $active.addClass('active');
               },2000);

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

3 个答案: