添加和删​​除具有相同类的随机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>