jquery循环div随机添加类并在延迟后删除

Question

我正在尝试随机循环浏览一系列div。每次它选择一个div 时，它都会添加一个 .active-key 类，然后再次删除它并在一定时间后移动到另一个div。有没有办法在jQuery中做到这一点？

<div id="keyboard">
   <div class="key">
   <div class="key active key">
   <div class="key">
   <div class="key">
   <div class="key">
   <div class="key">
</div>
var divs = $('#keyboard .key ').addClass('active-key'), 
i = 0; 
(function cycle() { 
divs.eq(i).show(0) 
.delay(1000) 
.removeClass('active-key'); 
i = ++i % divs.length; 
})();

---

如果你正在使用SVG，你必须使用attr而不是class。

JS小提琴最终工作SVG示例

Answer 1

对于随机项目选择，您可以尝试如下操作：

var divs = $('#keyboard .key');
(function cycle() {
    setTimeout(function() {
        var index = Math.floor(Math.random() * divs.length);
        divs.removeClass('active-key')
            .eq(index).addClass('active-key');
        cycle();
    }, 1000);
    
})();

.key {
    width: 40px;
    height: 40px;
    background: #EEE;
    display: inline-block;
}
.key.active-key {
    background: coral;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keyboard">
    <div class="key active-key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
</div>

Answer 2

从你的代码中，我做了这个：

.CSS

.key {
    border: 1px solid gray;
    background-color: gray;
    width: 100px;
    height: 100px;
    margin: 10px;
}
.active {
    background-color: red;
}

.HTML：

<div id="keyboard">
   <div class="key"></div>
   <div class="key active"></div>
   <div class="key"></div>
   <div class="key"></div>
   <div class="key"></div>
   <div class="key"></div>
</div>

.JS：

var loop = window.setInterval(function() {
    var rand = Math.round(Math.random()*5) + 1; // 5 is the length of divs
    var i = 0;
    $('.key').removeClass('active');
    $('.key').each(function() {
        if(rand == i) {
            $(this).addClass('active');
        }
        i++;
    });
    // Stop the loop with `enter code here`
    //  clearInterval(loop);
}, 500);

希望对您有所帮助！

Answer 3

这是我的答案，

$(document).ready(function(){
 function f1()
 {
    var childSize=$("#keyboard").children().size();
    setTimeout(function(){
        $("#keyboard div").removeClass("active-key");
        var rand1=Math.floor(Math.random()*(childSize));
      $("#keyboard").find("div:nth-child("+(rand1+1)+")").addClass("active-key");
      f1();
    },1000);
  }
});

您也可以使用 .hasClass（） 方法添加一个额外的条件来检查div 是否已经具有该类！