Question

我环顾四周，找到了一段完成工作的代码，但它并不适用于我的所有代码。我总共有8个Div标签，我想随机化，这段代码只允许我随机化7个。如果我用8替换7，它只是按顺序显示所有内容。我不经常使用Javascript并遇到障碍。非常感谢任何帮助。

<script type="text/javascript">
$(document).ready(function() {
    $(".workPiece").hide();

    var elements = $(".workPiece");
    var elementCount = elements.size();
    var elementsToShow = 7;
    var alreadyChoosen = ",";
    var i = 0;
    while (i < elementsToShow) {
        var rand = Math.floor(Math.random() * elementCount);
        if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
            alreadyChoosen += rand + ",";
            elements.eq(rand).show();
            ++i;
        }
    }
});
</script>

Answer 1

This implementation的Fisher-Yates shuffle似乎效果很好：

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [rev. #1]

shuffle = function(v){
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

// Shuffle DIVs
$(document).ready(function() {
    console.log(shuffle($('div')));
});

Answer 2

试试这个

var elements = $(".workPiece");
while (elements.length) {
   var rand = Math.floor(Math.random() * elements.length);
   elements.eq(rand).show();
   elements = elements.not(':eq(' + rand + ')');
}

但我不知道这是否有用。

Answer 3

要使所有元素都可以使用，你需要实际移动元素本身来自动移动它们，而不是随意隐藏它们中的一些。

以下是一个示例jQuery插件：

(function($) {
  $.fn.shuffle = function(selector, limit) {
    if (limit !== undefined) {
      limit -= 1;
    }
    return this.each(function() {
      var $this = $(this);
      var nodes = $this.children(selector).show().remove().get();
      while (nodes.length > 0) {
        var i = Math.floor(Math.random() * nodes.length);
        $this.append(nodes.splice(i, 1));
      }
      if (limit !== undefined) {
        $this.children(selector + ':gt(' + limit + ')').hide();
      }
    });
  };
})(jQuery);

你会这样称呼它：

$('.grid-8').shuffle('.workPiece');

您可以限制可见子项的数量，如下所示：

$('.grid-8').shuffle('.workPiece', 4);

这是jsFiddle for it。

使用Javascript随机化Div标签

3 个答案: