我想在 2 秒后向从 0
索引开始的每个元素添加一个备用类 visible
。 (如 0
、1
、2
、3
,...直到最后)。
当涉及到最后一个元素时,然后向后添加类,如 (10
, 9
, 8
, ... 直到 0
),因此当再次处于 0
时,向前和向后就像一个无限循环。预先感谢您的帮助。
$(function() {
iterate();
function iterate() {
var i = 0;
var plus = setInterval(function() {
i++;
if (i == 10) {
clearInterval(plus);
}
}, 1000);
var minus = setInterval(function() {
i--;
if (i == 0) {
clearInterval(minus); // again start plus interval
}
});
$('li').removeClass('visible');
$('li').eq(i).addClass('visible');
}
});
.visible {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ol>
<li class="visible">One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
最佳答案
试试这个:尝试下面的代码,您可以在其中放置逻辑来保存当前索引并使用 setInterval
函数添加/删除类
$(function () {
var i = $("ol li").length;
var j =0;
var down = true;
setInterval(function(){
if(i==j || j<0) {
down = !down;
if(j<0) {
j=0;
}
}
if(down) {
$("ol li").eq(j).addClass("visible");
j++;
} else {
$("ol li").eq(j).removeClass("visible");
j--;
}
}, 2000);
});
.visible {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
关于javascript - 使用 JavaScript 交替添加类到列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51435222/