【问题标题】:How can I randomly show a set of elements using jQuery?如何使用 jQuery 随机显示一组元素?
【发布时间】:2010-09-19 03:09:03
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript jquery


    【解决方案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 将相当容易。
        猜你喜欢
        • 2017-06-07
        • 2022-12-31
        • 1970-01-01
        • 1970-01-01
        • 2011-12-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多