使用jQuery连续添加和删除类到一个随机元素 [英] Continuously add and remove class to a random element with 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）; 
  

然而，这显然不会连续运行，我不知道如何正确设置延迟

解决方案

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

这样：

HTML

 < ul> 
< li>一个< / li> 
< li>两个< / li> 
< li>三< / li> 
< li>四< / li> 
< li>五< / li> 
< li>六< / li> 
< li>七< / li> 
< li>八< / li> 
< li>九< / li> 
< li>十< / li> 
< / ul> 
  

Javascript（w / JQuery）

  setRandomClass（）; 
 setInterval（function（）{
 setRandomClass（）; 
}，2000）; //毫秒数（2000 = 2秒）
 
 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）; 
} 
  

这是一个工作示例

Let's say I have an unordered list of ten elements.
I'd like a class to be added to one of them at random, and then remove that class after a couple of seconds and start again with another randomly chosen element indefinitely.

What would be the cleanest way to achieve that?

edit: What I've got so far:

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

And the jQuery:

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

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

However, this obviously does not run continuously, and I don't know how to properly set a delay before removing the class.

解决方案

You need to use setInterval to create a timer, and then you can choose a random number and set the class for that item index.

Something like this:

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

这篇关于使用jQuery连续添加和删除类到一个随机元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！