将类添加和删除到具有相同类的随机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中，您可以调用函数，该函数首先从div中删除classes数组中的所有类，然后从同一个数组中向其添加一个随机类。

​

var classes = [
    "cls-1",
    "cls-2",
    "cls-3",
    "cls-4"
    ];
    var $div = $(".circle");
    setInterval(function() {
    	$div.each(function(index){
    		$(this).removeClass( classes.join(" ") );
    		$(this).addClass( classes[ Math.floor( Math.random() * classes.length ) ] );
    	});//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>

​