選擇隨機元素

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

您需要做的基本上是首先選擇所有點，然后在每次定期激活運行時刪除先前設置的類並將其再次設置為索引范圍為 0 到 dots count - 1隨機元素。

這是一個例子。

 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

還有一種不同的方式，容易理解。

演示

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

 .someClass { background:green; }

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

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)