동일한 클래스의 무작위 div에 클래스 추가 및 제거

Question

임의의 간격으로 클래스를 무작위로 변경하는 동그라미를 설정하려고하지만 아래에있는 것을 가져 와서 만드는 방법을 알 수 없습니다. 그래서 각 .circle은 다른 임의의 클래스로 이동합니다. 현재 아래의 코드는 모든 .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에서 divs의 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>