<分区>
<分区>
我正在尝试遍历一组 CSS 类，以在 jQuery 中的设定间隔内更改 body 元素的线性渐变颜色。
CSS
.class1 {
background-image: linear-gradient(to right, crimson, gold);
}
.class2 {
background-image: linear-gradient(to right, blue, #cd7f32);
}
.class3 {
background-image: linear-gradient(to right, yellow, black);
}
.class4 {
background-image: linear-gradient(to right, silver, green)
}
jQuery
$(document).ready(function(){
var classList = ['.class1', '.class2', '.class3', '.class4'];
setInterval(function(){
for(var i=0; i<classList.length; i++){
$(document.body).addClass(classList[i]);
$(document.body).removeClass(classList[i-1]);
}, 5000);
)};
最佳答案
首先，您需要从类名中删除 .。
现在，由于您的目标是按顺序应用类，因此您可以保留一个变量来跟踪当前索引并使用 removeClass() 在添加新类之前删除所有应用的类下一次迭代。
var classList = ['class1', 'class2', 'class3', 'class4'];
演示
$(document).ready(function() {
var classList = ['class1', 'class2', 'class3', 'class4'];
var i = 0;
setInterval(function() {
$(document.body).removeClass();
i = i + 1;
$(document.body).addClass(classList[i]);
if (i == 3) {
i = 0;
}
}, 1000);
});.class1 {
background-image: linear-gradient(to right, crimson, gold);
}
.class2 {
background-image: linear-gradient(to right, blue, #cd7f32);
}
.class3 {
background-image: linear-gradient(to right, yellow, black);
}
.class4 {
background-image: linear-gradient(to right, silver, green)
}<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>关于javascript - 如何按一定时间间隔一次显示数组中的一个类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57156490/
相关文章：
html - 我可以使用什么 HTML 或 CSS 代码来使图像/文本只能在移动网站上查看，而不能在桌面上查看？
javascript - 在 vuejs 中，如何引用方法内完成的函数中的数据？
javascript - 尝试制作 polyfill 时，typescript linter 会触发错误
javascript - 我想在特定日期给出特定条件，但它无法正常工作
javascript - jQuery自动完成 'focus'事件触发，但没有反向等效项。我徘徊离开，但变化依然存在
javascript - 如何使用 JavaScript 或 jQuery 启用按钮