Javascript jquery循环-添加然后删除css类-无限循环

如何使用jQuery在一组4个li上无限地添加然后删除CSS类

基本上，看这个简单的小提琴（没有任何jquery）：

我想通过循环框来更改框的css，翻转回原始css，然后继续下一个等等

感谢您的帮助

你可以试试这个

CSS对于当前项，要添加/删除的类

ul#topboxesmenu li a.current{ background:black }

JS

$('#topboxesmenu li a').each(function(i){
    var t=$(this);
    setTimeout(function(){
        t.addClass('current');
        setTimeout(function(){
            t.removeClass('current');
        }, 1000);
    }, 1100*i);
});

更新：用于连续循环

$(function(){
    loopIt();
});

function loopIt(){    
    $('#topboxesmenu li a').each(function(i){
        var t=$(this);
        setTimeout(function(){
            t.addClass('current');
                setTimeout(function(){
                    t.removeClass('current');
                    if(i==$('#topboxesmenu li a').length-1) loopIt();;
                }, 1000);
        }, 1100*i);
    });
}

试试这个：

jQuery(document).ready(function() {
    window.setInterval(function() {
            var oldBox = jQuery('#topboxesmenu li.active');
            if(oldBox.length == 0 || oldBox.next().length == 0)
            {
                    oldBox.removeClass('active');
                jQuery('#topboxesmenu li:first-child').addClass('active');
            }
            else
                oldBox.removeClass('active').next().addClass('active');
    },2000);
});

它将在这些框中循环，一个接一个地向它们添加活动类

$（文档）.ready（函数（）{
setInterval（函数（）{
$（“#TopBoxes菜单a”）。每个（函数（）{
$（this.css（“背景”，get_random_color（））；
});
}, 1000);
});
函数get_random_color（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.round（Math.random（）*15）]；
}
返回颜色；
}

此示例使用随机颜色，但可以在

的每个部分中轻松更改为
.addClass（）

JS小提琴（现场示例）


我认为这是你想要的：

el = $('#topboxesmenu li:first-child');
setInterval(function() {
    el = window.el;
    el.siblings().children('a').css('background','#ff0000');
    el.children('a').css('background-color', 'blue');
    el = el.next().length ? el.next() : el.parent().children('li:first-child');
}, 1000);​

看

更新：

关于您的测试页面不工作，您的javascript位于body标记之外，请尝试将
标记放在
标记之前。您当前拥有以下功能：

</body>

<script type="text/javascript" ....
...
...
</html>


据我所知，任何时候都应该有一个盒子来上课？@Ben Davis，检查我的最新答案/提琴。令人印象深刻，但对于OP的要求来说可能过于复杂：）仍然没有乐趣：（我不明白，因为它在jfiddle中工作得很好，脚本末尾似乎有一些不可见的字符是非法的，可能是复制和粘贴中的一个不间断空格。尝试从这里复制和粘贴代码，而不是从这里复制和粘贴代码。或者删除}之间的任何内容）；以及和jQuery（docThanks，整理了代码，但仍然不起作用，很不幸：（我只是不知道字符是从哪里来的…尝试从这里复制和粘贴：谢谢Nelson，在不同的测试页面上尝试您的解决方案，但它也不起作用：s我发现了另一个错误，您的jquery库应该放在里面，请参阅我更新的答案。
</body>

<script type="text/javascript" ....
...
...
</html>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>