Question

我有下一个HTML代码

<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
...
<div class="item item40"></div>

我想选择div的随机数组来为它们添加一个活动类，因为我使用这个jquery代码

function randOrder() {
    return ( Math.round(Math.random())-0.5 ); 
} 
$(document).ready(function() {
    var items = [ 'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11', 'item12', 'item13', 'item14', 'item15', 'item16', ... , 'item40' ];
    var randitems = items.sort( randOrder ).slice(0,5);
});

现在我想设置randitems的间隔来选择一个随机的类来为它们添加“活动”类。但我怎么能为它做一个循环，我想每隔1000毫秒选择一个活跃类的rando div而不刷新页面

Answer 1

我从@adeneo tnx @adeneo

得到了答案

function randOrder() {
    return ( Math.round(Math.random())-0.5 ); 
} 

setInterval(function() {
    $('.item').removeClass('active').sort( randOrder ).slice(0,5).addClass('active')
}, 1000);

.active {color: red};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>

https://jsfiddle.net/cdxkxuw6/

jquery - 向具有无限循环

1 个答案: