toggleClass在三个不同的类之间

时间:2018-03-07 02:13:42

标签: javascript jquery

我试图每隔4秒在三个班级之间切换,但我无法弄清楚如何让第三个班级工作。这是我到目前为止(有效)

User

3 个答案:

答案 0 :(得分:1)

如果您想要一个示例

,此方法允许您添加更多类
 $(document).ready(function() {
 setInterval(function(){
$('.myClass.class1').toggleClass('class2 class3')
 }, 4000);
 });

答案 1 :(得分:1)

我建议你将所有类存储在一个数组中并增加一个索引以在数组中旋转。

# Using yarn:
yarn add https://github.com/react-community/react-native-maps.git

# Using npm:
npm install https://github.com/react-community/react-native-maps.git --save

答案 2 :(得分:1)

如果您可以使用classList replace,则可以使用以下内容。

var classes = ["class1", "class2", "class3"];
var index = 0;
var classList = document.querySelector(".myClass").classList;

setInterval(function() {
  classList.replace(classes[index++ % 3], classes[index % 3]);
}, 1000);
.class1 {
  background: yellow;
}

.class2 {
  background: orange;
}

.class3 {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass class1">
  look at me!
</div>

如果您无法使用replace(并非所有浏览器都支持),您可以使用此jquery版本替换该行:

var classes = ["class1", "class2", "class3"];
var index = 0;

setInterval(function() {
  $(".myClass").removeClass(classes[index++ % 3]).addClass(classes[index % 3]);
}, 1000);
.class1 {
  background: yellow;
}

.class2 {
  background: orange;
}

.class3 {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass class1">
  look at me!
</div>