使用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連續添加和刪除類到隨機元素

回答

相關問題