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 fiddle用于最终工作的SVG示例

Answer 1

对于随机项目选择，您可以尝试这样的事情：

＆＃13;

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);
    
})();

＆＃13;

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

＆＃13;

<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>

＆＃13;

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是否已经拥有该类的额外条件！

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

3 个答案: