选择随机元素

Question

我有多个div元素在父div下具有相同的类点，如此

<div id="dots">
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   ...
   <div class="dot"> . </div>
</div>

如何使用JavaScript选择class="dot"的所有元素，并且每5秒在随机元素上应用某个类。

randomElement.addClass('someClass');

Answer 1

您需要做的基本上首先选择所有点，然后在每个定期激活运行中删除先前设置的类并再次将其设置为索引within range从0到点count - 1的随机元素。 / p>

这是一个例子。

var $dots = $('#dots .dot');

function activate() {
    $dots.removeClass('active')
         .eq([Math.floor(Math.random()*$dots.length)])
         .addClass('active');
	setTimeout(activate, 1000);
}

activate();

#dots .dot {
    display: inline-block;
    height: 50px;
    width: 50px;
    background: coral;
    border-radius: 50%;
    opacity: 0.2;
    transition: opacity .3s ease;
}
#dots .dot.active {opacity: 1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dots">
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
</div>

Answer 2

这个怎么样？

function addClassToRandomDotElement(){
    var dotElements = document.getElementsByClassName('dot');
    var totalDotElements = dotElements.length;
    var randomNumber = Math.floor(Math.random() * totalDotElements ) + 1;
    var randomDotElement = dotElements[randomNumber];
    randomDotElement.addClass('someClass');
}

setInterval(function(){
    addClassToRandomDotElement();
},5000);

Answer 3

还有一种不同的方式，易于理解。

DEMO

＆＃13;

＆＃13;

var noofdot = $(".dot").length;
setInterval(function () {
    $(".dot").removeClass("someClass");
    var x = Math.floor((Math.random() * noofdot) + 1);
    $(".dot:nth-child(" + x + ")").addClass("someClass");
}, 5000);

＆＃13;

.someClass
{
    background:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dots">
    <div class="dot">.</div>
    <div class="dot">.</div>
    <div class="dot">.</div>...
    <div class="dot">.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是对所有元素的迭代：

1. 迭代所有元素
2. 将类添加到随机元素
3. 从迭代列表中删除这些元素。

var elements = document.getElementsByClassName("dot");


setInterval(function() {
  var random = Math.floor(Math.random() * elements.length);
  elements[random].className += " extra";
  delete elements[random];
}, 1000);
//change 1000 to 5000. This is the interval speed in milisec.

.extra {
  font-size: 200%;
  background-color: cornflowerblue;
  width: 50px;
}

<div class="container">
  <div class="dot">Test</div>
  <div class="dot">Test</div>
  <div class="dot">Test</div>
  <div class="dot">Test</div>
</div>

Answer 5

这是另一种简单的方法：

function changeColor(){
  var randInt = getRandomInt(0, $(".dot:not(.newStyle)").length -1);
  $($(".dot:not(.newStyle)")[randInt]).addClass('newStyle');
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


setInterval(function(){
    changeColor();
},3000);

.newStyle{background-color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot">testing</div>
<div class="dot">test</div>
<div class="dot">cool</div>
<div class="dot">more</div>
<div class="dot">cat</div>
<div class="dot">lol</div>

Answer 6

我认为以下内容对您有用。

window.radomNo = 0;
setInterval(function(){
    if(radomNo) $(".dot:eq("+ radomNo +")").toggleClass("randomcss");
    window.radomNo = Math.floor((Math.random() * $(".dot").length) + 1);
	$(".dot:eq("+ radomNo +")").toggleClass("randomcss");
},1000);

.randomcss {
    background : yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dots">
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
     <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
     <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
     <div class="dot"> . </div>
   <div class="dot"> . </div>
   <div class="dot"> . </div>
</div>

http://jsfiddle.net/kishoresahas/7qgvru5p/

Answer 7

如果你使用jquery，你可以尝试以下方法：

randomElements = jQuery("div").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,5)