使用 javascript/jquery 根据随机打乱的数组显示 div

Question

本质上，我正在尝试编写一个 Javascript/Jquery 脚本，该脚本将 show/hide 多个 div 一次一个，顺序由一系列随机打乱的数字。

我已经设法让脚本随机排列数字并在 div 中循环工作，但我不确定如何将两者结合起来。

目前的脚本如下所示

$(document).ready(function() {

    function shuffle(arra1) {
        var ctr = arra1.length, temp, index;

        // While there are elements in the array
        while (ctr > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * ctr);
            // Decrease ctr by 1
            ctr--;
            // And swap the last element with it
            temp = arra1[ctr];
            arra1[ctr] = arra1[index];
            arra1[index] = temp;
        }

        return arra1;
    }

    var myArray = [0, 1, 2, 3, 4, 5];
    console.log(shuffle(myArray));

    var divs = $('div[id^="random"]').hide(),
        i = 0;

    (function cycle() { 
        divs.eq(i).fadeIn(400)
                  .delay(1000)
                  .fadeOut(400, cycle);

        i = ++i % divs.length;
    })();
});

我试图在 HTML 中循环的 div 看起来像这样

<div id="random-divs">
    <div id="random0">Div 0</div>
    <div id="random1">Div 1</div>
    <div id="random2">Div 2</div>
    <div id="random3">Div 3</div>
    <div id="random4">Div 4</div>
    <div id="random5">Div 5</div>
</div>

如果有人能指出正确的方向，我将不胜感激。

Answer 1

最简单的更改是将 divs.eq(i) 替换为 divs.eq(myArray[i])，同时考虑到打乱的位置。

但是，与其用索引打乱数组，不如用元素本身打乱数组通常更容易理解：

var divs = $('div[id^="random"]').hide().toArray()
    i = 0;
shuffle(divs);

(function cycle() { 
    $(divs[i]).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % divs.length;
})();

您甚至可能不需要 toArray 和 $(divs[i])，您的 shuffle 函数足够通用，也可以处理 jQuery 集合。

Answer 2

尝试更新 jQuery 选择器 "div[id^="random]" 因为它也会影响 ID 为 "random-divs" 的容器 div。我想你不想隐藏容器div 但只是它的孩子。

Answer 3

$(document).ready(function() {

    function shuffle(arra1) {
        var ctr = arra1.length, temp, index;

        // While there are elements in the array
        while (ctr > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * ctr);
            // Decrease ctr by 1
            ctr--;
            // And swap the last element with it
            temp = arra1[ctr];
            arra1[ctr] = arra1[index];
            arra1[index] = temp;
        }

        return arra1;
    }

    var myArray = [0, 1, 2, 3, 4, 5];
    var shuffledArray = shuffle(myArray);
    console.log(shuffledArray);
    var divs = $('div[id^="random"]');
    
    (function cycle() { 
        var i = shuffledArray.shift();
        if(i === undefined){
          return
        }
        divs.eq(i).fadeIn(400)
                  .delay(1000)
                  .fadeOut(400, cycle);

      
    })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="random-divs">
    <div style='display:none;' id="random0">Div 0</div>
    <div style='display:none;' id="random1">Div 1</div>
    <div style='display:none;' id="random2">Div 2</div>
    <div style='display:none;' id="random3">Div 3</div>
    <div style='display:none;' id="random4">Div 4</div>
    <div style='display:none;' id="random5">Div 5</div>
</div>

使用 javascript/jquery 根据随机打乱的数组显示 div

Show div's based on a randomly shuffled array using javascript/jquery

javascript

arrays

jquery

shuffle

display