jquery - 是否可以在页面加载时使用 Jquery 每 3 秒切换两个类？

Question

$(document).ready(function(){
  $('#green').toggleClass(green red).setTimeOut(3000);
  $('#red').toggleClass(red green).setTimeOut(3000);
});

.wdr{
    width:300px
    height:50px;
}
.red{
    background-color: red;
}
.wdg{
    width:150px
    height:100px;
}
.green{
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="red" class="wdr red"></div>
<div id ="green" class="wdg green"></div>

我对 jQuery 不太有经验。在此代码中，我尝试每 3 秒切换两个 div 的颜色。但这没有按预期工作。任何人都可以帮我解决这个问题吗？

Answer 1

您可以使用 setInterval 来执行此操作。它将每 x 毫秒运行一次，为您提供所需的结果。

$(function() {
  setInterval(function() {
    $('#green').toggleClass('green red');
  }, 3000);

  setInterval(function() {
    $('#red').toggleClass('red green');
  }, 3000);
});

.wdr{
  width:300px
    height:50px;
  }
.red{
  background-color: red;
}
.wdg{
  width:150px
    height:100px;
}
.green{
  background-color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red" class="wdr red">
  test
</div>
<div id="green" class="wdg green">
  test
</div>

您也可以放弃 jQuery 并使用 classList它是类似这样的切换方法。

const green = document.querySelector('#green');
const red = document.querySelector('#red');

setInterval(() => {
  red.classList.toggle('red');
  red.classList.toggle('green');
}, 3000);

setInterval(() => {
  green.classList.toggle('green');
  green.classList.toggle('red');
}, 3000);