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

【问题标题】：jquery cycle - add then remove css class - infinite loopjquery 循环 - 添加然后删除 css 类 - 无限循环
【发布时间】：2012-09-24 03:50:02
【问题描述】：

如何使用 jQuery 在一组 4 li 上无限添加和删除 CSS 类。

基本上，看看这个简单的小提琴（没有任何 jquery）：http://jsfiddle.net/kHsvN/

我想循环通过盒子来改变盒子的css，翻回原来的css，然后继续下一个等等……

任何帮助表示赞赏！

【问题讨论】：

据我了解，在任何时候都应该有一个盒子有这个类？
@Ben Davis，检查我更新的答案/小提琴。

标签： javascript jquery loops cycle infinite

【解决方案1】：

你可以试试这个

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

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

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

DEMO

更新：对于连续循环

$(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);
    });
}

DEMO。

【讨论】：

【解决方案2】：

试试这个：

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);
});

它将循环遍历这些框，一个接一个地向它们添加一个活动类。

http://jsfiddle.net/gKEmL/

【讨论】：

没有仍然没有快乐:(不明白，因为它在 jfiddle deeside.ac.uk/build/test.php 中工作正常
脚本末尾似乎有一些非法的不可见字符，可能是复制和粘贴中的非中断空格。尝试从 jsfiddle 复制和粘贴代码，而不是从这里。
或者作为替代删除});和以及和 jQuery(doc
谢谢，整理了代码，但不幸的是仍然无法工作:( deeside.ac.uk/build/test.php
我只是不知道字符从哪里进来...尝试从这里复制和粘贴：pastebin.com/ChXmg0Fc

【解决方案3】：

$(document).ready(function() {
   window.setInterval(function() {
        $("#topboxesmenu li a").each(function() {
            $(this).css("background", get_random_color());
    });
  }, 1000);
});

function get_random_color() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
     color += letters[Math.round(Math.random() * 15)];
   }
   return color;
}

此示例使用随机颜色，但可以在 .each 部分中轻松更改为 .addClass()。

JS Fiddle（现场示例）

http://jsfiddle.net/kHsvN/6/

Random color generator in JavaScript

【讨论】：

令人印象深刻，但对于 OP 的要求来说可能过于复杂 :)

【解决方案4】：

我认为这是在做你想做的事：

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);

见working demo

更新：
关于您的测试页不起作用，您的 javascript 在 body 标记之外，请尝试将您的 </body> 标记放在 </html> 标记之前。你目前有这个：

</body>

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

更新 2：
还有你的 jquery 脚本标签：

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

应该放在页面的<head> 中，而不是你当前拥有它的正文中。

【讨论】：

感谢 Nelson，在不同的测试页面上尝试您的解决方案，但它也不起作用：S deeside.ac.uk/build/test2.php
我发现了另一个错误，您的 jquery 库应该放在中，请参阅我的更新答案。