使用jQuery连续添加和删除类到随机元素

假设我有一个无序的十个元素列表。
我想要随机添加一个类，然后在几秒后删除该类，然后再次使用另一个随机选择的元素无限期地重新开始。使用jQuery连续添加和删除类到随机元素

什么是最干净的方式来实现呢？

编辑： 我已经走到这一步：

<ul id="hideAndSeek"> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
    ... 
</ul>

而jQuery的：

var random = Math.floor(Math.random() * 1000); 

var shownElement = $("#hideAndSeek li"); 
shownElement.eq(random % shownElement.length).addClass("shown");

然而，这显然不连续运行，我不知道如何在删除课程之前正确设置延迟。

来源

2013-08-07 Tom S.

您已经使用到目前为止已经试过？你的代码在哪里？ – Doorknob

您需要使用setInterval创建一个定时器，然后你可以选择一个随机数并为该项索引设置类。

事情是这样的：

HTML

<ul> 
    <li>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> 
</ul>

使用Javascript（W/JQuery的）

setRandomClass(); 
setInterval(function() { 
    setRandomClass(); 
}, 2000);//number of milliseconds (2000 = 2 seconds) 

function setRandomClass() { 
    var ul = $("ul"); 
    var items = ul.find("li"); 
    var number = items.length; 
    var random = Math.floor((Math.random() * number)); 
    items.removeClass("special"); 
    items.eq(random).addClass("special"); 
}

Here is a working example

来源

2013-08-07 10:55:26 musefan

作品像魅力！非常感谢！ –

@TomS。请注意我对随机数部分的轻微编辑。最初它得到1-10，但我们想要0-9，因为索引（'eq（）'）是基于0的 – musefan

可以做这样的事情：

HTML

<ul id="randomCol"> 
    <li>test1</li> 
    <li>test2</li> 
    <li>test3</li> 
    <li>test4</li> 
    <li class="color">test5</li> 
    <li>test6</li> 
    <li>test7</li> 
    <li>test8</li> 
    <li>test9</li> 
    <li>test10</li> 
</ul>

jQuery的

var tid = setInterval(changeUp, 1000); 
function changeUp() { 
    var i = Math.floor((Math.random()*9)); 
    $('#randomCol').children().removeClass('color'); 
    $('#randomCol').children().eq(i).addClass('color'); 
}

fiddle

来源

2013-08-07 10:51:56 AbstractChaos

我也注意到你（和我一样）改变你的随机数范围，但是你的当前代码将产生1-9，而不是0-9。 – musefan

好现货将更新 – AbstractChaos

使用jQuery连续添加和删除类到随机元素

回答

相关问题