Javascript 如何按顺序切换元素类？

我试图让每个元素的类按顺序一次自动更改一个。这意味着元素1发光然后熄灭，元素2发光然后熄灭，依此类推。当每个元素发光时，整个序列重新开始

$（'header div:first'）.toggleClass（'highlight'）.nextAll（）.toggleClass（'none'）；
函数高亮显示（）{
var$off=$（'header div.highlight'）。toggleClass（'none'）；
如果（$off.next（）.length）{
$off.next（）.toggleClass（'none'）；
}否则{
$off.prevAll（）.last（）.toggleClass（'highlight'）；
}
}
$（文档）.ready（函数（）{
设置间隔（高亮显示，1000）；
});

要素1
要素2
要素3
要素4
解决方案：
通过
更改
.none
。突出显示
，如下所示：


$（'header div:first'）。toggleClass（'highlight'）；
函数高亮显示（）{
var$off=$（'header div.highlight'）。toggleClass（'highlight'）；
如果（$off.next（）.length）{
$off.next（）.toggleClass（'highlight'）；
}否则{
$off.prevAll（）.last（）.toggleClass（'highlight'）；
}
}
$（文档）.ready（函数（）{
设置间隔（高亮显示，1000）；
});
。突出显示{
颜色：红色；
}

要素1
要素2
要素3
要素4
类和调用一起使用的
none
读起来可能有点混乱。您只需通过
div.highlight
跟踪当前突出显示的元素，并使用下面更新的代码确定下一个目标元素，可能会更好：

function highlight() {
    // Remove the highlight from all options
    var $current = $('div.highlight');
    // Store the next one
    var $next = $current.next('div');
    // Remove all highlighting
    $('div.highlight').removeClass('highlight')
    if($next.length){
      $next.addClass('highlight');
    } else {
      $('header div:first').addClass('highlight');
    }
}
// When the document is ready
$(function() {
    // Initially set your first element as highlighted and start your interval
    $('header div:first').addClass('highlight');
    setInterval(highlight, 1000);
});

示例

您可以在下面进行演示：


图像仅用于示例目的，计时可能与实际执行的代码不同：）
因此，是的，您不需要
。无
。只需使用默认样式和
.highlight
类即可。

获取项目数，创建一个
c
计数器，增加它并使用
%
提醒运算符循环它：


jQuery（函数（$）{//DOM准备就绪
var$el=$（“标题>分区”），tot=$el.length，c=0；
$el.eq（c）.addClass（“高光”）；//初始高光
setInterval（函数（）{
$el.removeClass（“highlight”）.eq（+c%tot）.addClass（“highlight”）；
}, 1000);
});
header>div{transition:0.5s；-webkit transition:0.5s；}
header>div.highlight{color:#f0f；}

要素1
要素2
要素3
要素4
您可以尝试这种方法

Javascript

var highlight = function(){
$('header div').removeClass('highlight');
$('header div').each(function(i,v) {
setTimeout(function(){$(v).prev().toggleClass('highlight');$(v).toggleClass('highlight');}, i*1000);
});
setTimeout(highlight, ($('header div').length)*1000);
};
highlight();

我认为额外的
。没有一个
是无用的。你所需要的就是你的
。突出显示
我应该从哪里取下它吗？在任何地方，除非你在问题中包含一些CSS，以证明它有实际用途。只需切换您的
高亮显示
类即可。@RokoC.Buljan“将代码片段复制到答案”按钮保存time@HorsSujetwoopsz Sorree:）我现在明白了，干得好！谢谢你的代码很完美，但我有一个问题。你把javascript放在里面还是放在前面？因为我在我这边试过了，但它不起作用。香草JavaScript的案例选择是经过验证的。所以我需要在我的代码中加入更多的代码来
？
写更多的代码
：
写更少的代码
@CainNuke我宁愿让你自己选择。若你们有几个js库，我建议你们使用。我的原始代码包含在中，但你们的代码只有在正文中才有效。有什么原因吗？@CainNuke我不知道。您可以使用
$（document.load（function（）{/*code here*/}）来修复它。在循环中反复解析DOM不是最好的主意。@AlexanderDixon它是一个.gif文件，我显然不擅长制作完美的文件。。。我对你的评论投了更高的票，希望它只是一个拖拉（演示本身看起来应该很好）。@AlexanderDixon LOL:D刚刚看到了jsBin演示，因为这太令人紧张了！！就在Gif图片中，我的朋友，我认为你应该撤销下一票！如果Rion加上一个sinppet，上面写着“下面是一个图像样本”，我可以投上一票。抱歉，里奥尼在下面为你添加了一句话@AlexanderDixon:）看起来很优雅，但这个CSS3的东西在所有浏览器中都能用吗？@AlexanderDixon是的，在所有现代浏览器中都能用。即使在IES中，您的代码也几乎是最好的。只有一个问题，序列从元素2开始。有没有办法从元素1开始呢？没关系。我刚刚意识到您将该类添加到了第一个元素中，并且按照预期工作。但是，我无法更改html中div的类，因为它是一个外部包含。有什么方法可以让它在不改变html的情况下工作吗？就是这样。非常感谢。