是否可以在页面加载时使用 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 个 sec.but 上切换两个 divs 的颜色，这不起作用，因为 expected.Can 有人帮我解决这个问题吗？

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

Answer 2

这是一个解决方案。希望对您有所帮助！

$(function () {
   var flag = false;
    setInterval(function() {
        flag = !flag;
        $("#red").css("background", flag ? "green" : "red");
        $("#green").css("background", flag ? "red" : "green");
    }, 2000);   
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id ="red" class="wdr red">
  This is text-1
  </div>
<div id ="green" class="wdg green">
  This is text-2
  </div>

Answer 3

在您的情况下，只有 DOM 选择器需要 jQuery。您也可以递归调用该方法。

 var toggleColors = function() {
   $("#red").toggleClass("red green");
   $("#green").toggleClass("green red");
 }

 var maxRunTimes = 10;
 var runTimes = 0;

 function repeat() {
   if (runTimes < maxRunTimes) {
     toggleColors();
     runTimes++;
     setTimeout(repeat, 3000);
   }
 }

 repeat();

ps - 我在递归调用中添加了一个停止点。

看到这个JSFiddle

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

Is it possible to toggle two classes in every 3 second using Jquery on page load?

css

jquery

class

toggle

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