我试图让每个元素的类自动按顺序一次更改一个。这意味着元素 1 发光然后熄灭,而元素 2 发光然后熄灭,依此类推。当整个序列重新开始时,每个元素都会发光。
$('header div:first').toggleClass('highlight').nextAll().toggleClass('none');
function highlight() {
var $off = $('header div.highlight').toggleClass('none');
if ($off.next().length) {
$off.next().toggleClass('none');
} else {
$off.prevAll().last().toggleClass('highlight');
}
}
$(document).ready(function() {
setInterval(highlight, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div>element 1</div>
<div>element 2</div>
<div>element 3</div>
<div>element 4</div>
</header>
它不会按预期工作(元素 2 到 4 同时突出显示所有元素然后熄灭,而元素 1 根本没有改变)我不知道为什么。我做错了什么?
最佳答案
是的,您不需要 .none
。只需使用您的默认样式和 .highlight
类即可。
获取项目数,创建一个 c
计数器,递增它并使用 %
提醒运算符循环它:
jQuery(function( $ ) { // DOM is ready
var $el = $("header>div"), tot = $el.length, c = 0;
$el.eq(c).addClass("highlight"); // initial highlight
setInterval(function() {
$el.removeClass("highlight").eq(++c%tot).addClass("highlight");
}, 1000);
});
header > div { transition:0.5s; -webkit-transition:0.5s; }
header > div.highlight { color:#f0f; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div>element 1</div>
<div>element 2</div>
<div>element 3</div>
<div>element 4</div>
</header>
一些文档:
https://api.jquery.com/eq/
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()
关于javascript - 如何按顺序切换元素的类别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37058021/