如何使用 jQuery 随机显示一组元素？

Posted 2023-05-07

【中文标题】如何使用 jQuery 随机显示一组元素？

【英文标题】：How can I randomly show a set of elements using jQuery?

【发布时间】：2010-09-19 03:09:03

【问题描述】：

使用 jQuery，您如何以随机顺序在页面上的每个 div.foo show()，每 X 毫秒出现一个新的？

澄清：我想从隐藏所有这些元素开始，并以所有这些元素显示结束，因此两次show() 同一个元素是没有意义的。

我原本以为我会创建一个列出所有元素的数组，随机选择一个，显示那个，使用 splice() 从数组中删除它，然后从剩余列表中随机选择下一个 - 等等。但是由于我的数组是 jQuery 对象的一部分，splice() 不可用。

【参考方案1】：

一个有趣的方法是使用 shuffle 函数扩展 javascript 的 Array 基础对象。在 Prototype 中（在 JQuery 中应该相同，除了 jQuery.extend）。这是快速而肮脏的随机播放，还有很多其他方法可以做到这一点。

Object.extend(Array.prototype, 
  shuffle : function() 
    this.sort( function()  return 0.5 - Math.random();  );
    return this;
  
);

因此，假设您已经准备好您的 div 数组，请调用 shuffle() 方法并简单地按顺序（它们现在被打乱）并显示它们（根据您的间隔）。可能希望通过克隆 shuffle 方法返回的数组而不是直接对其进行排序来实现“非破坏性”。

【参考方案2】：

我自己不使用 jQuery，但是这个呢：

var intervalMilliseconds = X; // set to your value for X
var divFoos = $("div.foo").get();
var intervalId = setInterval(function() 
   $(divFoos.splice(Math.floor(Math.random() * divFoos.length), 1)).show();
   if(divFoos.length == 0) clearInterval(intervalId);
, intervalMilliseconds);

这应该可以解决问题。

---

更新：由于您的描述并不明确，我假设您的意思是您最终想要显示所有这些，并且一旦它们可见，我们就完成了。如果不是，请进一步解释，以便我更新（如果您还不能从我提供的代码中确定您需要什么）。

【参考方案3】：

我会这样做（未经测试）：

(function () 
    var int, els;
    int = 100; // interval, in milliseconds
    els = $('div.foo');
    setInterval(function () 
        var idx;
        idx = Math.floor(els.length * Math.random());
        $(els[idx]).show();
        setTimeout(function () 
            $(els[idx]).hide();
        , int);
    , int);
)();

【讨论】：

这基本上是循环显示一个，然后在显示另一个之前隐藏它，永无止境，并可能在显示其他一些之前多次显示相同的一个（可以生成随机数： 0、1、1、0、2 等）。很难知道这是否是 OP 的意思。

它似乎满足了他们表达的要求。例如，将其更改为不连续显示两次相同的 div 将相当容易。