javascript - 使用 javascript/jquery 显示基于随机打乱数组的 div

Question

本质上，我正在尝试编写一个 Javascript/Jquery 脚本，该脚本将按随机打乱的一系列数字确定的顺序一次显示/隐藏多个 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 上工作还有收藏。