同じクラスのランダムdivにクラスを追加して削除する

Question

クラスをランダムに一定間隔で変更する円の行を設定しようとしていますが、私が下にあるものをどのように取るかを決めることはできませんそれぞれの円が異なるランダムなクラスに移動するようにします。現在以下のコードはすべての.circle divを同じランダムクラスに変更します。

var classes = [ 
"cls-1", 
"cls-2", 
"cls-3", 
"cls-4" 
]; 
var $div = $(".circle"); 
setInterval(function() { 
$.each(classes, function(i, c) { 
    if ($div.hasClass(c)) { 
     var j = Math.floor (Math.random() * classes.length); 
     $div.removeClass(c).addClass(classes[j]); 
     return false; 
    } 
}); 
}, 1000); 

これはおそらく私が見落としているシンプルなものですが、私はJavaScriptにはかなり新しく、助けていただければ幸いです！ありがとう！

Answer 1

setIntervalでは、div32のclasses配列のすべてのクラスを最初に削除する関数を呼び出してから、同じ配列のランダムなクラスを追加することができます。

var classes = [ 
 
    "cls-1", 
 
    "cls-2", 
 
    "cls-3", 
 
    "cls-4" 
 
    ]; 
 
    var $div = $(".circle"); 
 
    setInterval(function() { 
 
    \t $div.each(function(index){ 
 
    \t \t $(this).removeClass(classes.join(" ")); 
 
    \t \t $(this).addClass(classes[ Math.floor(Math.random() * classes.length) ]); 
 
    \t });//each 
 
    }, 1000); //setInterval 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

.circle 
 
{ 
 
    background-color: #ddd; 
 
    border-radius: 50%; 
 
    float: left; 
 
    height: 60px; 
 
    margin: 10px; 
 
    width: 60px; 
 
} 
 

 
.circle.cls-1{ background-color: red; } 
 
.circle.cls-2{ background-color: green; } 
 
.circle.cls-3{ background-color: blue; } 
 
.circle.cls-4{ background-color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle"></div>