我现在使用 JavaScript,我想循环设置每个 <li>
类别“活跃”从 n° 1 到 <li>
n° 4,然后每 3 秒重新开始到 n° 1。
到目前为止我有这个代码:
HTML
<ul class="collection">
<li id="first" class="collection-item active">Desplazate hacia la pestaña <strong>HORARIOS</strong>.</li>
<li id="second" class="collection-item ">Ingresa tu N° de documento.</li>
<li id="third" class="collection-item ">Presiona el botón <strong>INGRESAR</strong>.</li>
<li id="four" class="collection-item "><strong>LISTO!</strong> Ahora puedes ver los horarios de la semana.</li>
</ul>
JavaScript
$(document).ready(function(){
setInterval(animacion,3000);
function animacion(){
$currently_selected = $('li.active')
// Loop back to first sibling if on the last one.
if ($currently_selected.next().length = 0){
$next_selected = $currently_selected.siblings().first()
} else {
$next_selected = $currently_selected.next()
$currently_selected.removeClass('active')
$next_selected.addClass('active')
}
}
});
请帮助我!
最佳答案
- 在测试
长度
时使用==
或===
,因为=
将充当赋值运算符
并且它总是被评估为true
else
block 应在分配$next_selected
变量后关闭
$(document).ready(function() {
setInterval(animacion, 3000);
function animacion() {
$currently_selected = $('li.active');
if ($currently_selected.next().length == 0) {
$next_selected = $currently_selected.siblings().first();
} else {
$next_selected = $currently_selected.next();
}
$currently_selected.removeClass('active');
$next_selected.addClass('active');
}
});
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="collection">
<li id="first" class="collection-item active">Desplazate hacia la pestaña <strong>HORARIOS</strong>.</li>
<li id="second" class="collection-item ">Ingresa tu N° de documento.</li>
<li id="third" class="collection-item ">Presiona el botón <strong>INGRESAR</strong>.</li>
<li id="four" class="collection-item "><strong>LISTO!</strong> Ahora puedes ver los horarios de la semana.</li>
</ul>
关于javascript - 我需要在 Jquery 中从 'active' 项目开始循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38084337/