Question

使用jQuery，你会如何以随机顺序show()页面上的每个div.foo，每隔X毫秒出现一个新的？{/ p>

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

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

Answer 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方法返回的数组而不是直接对其进行排序来制作“非破坏性”。

Answer 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);

这应该可以解决问题。

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

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

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

3 个答案: