Javascript 使用Java脚本随机化Div标记

我环顾四周，找到了一段代码，可以完成这项工作，但它并不适用于我所有的标签。我总共有8个Div标签，我想随机化，这段代码只允许我随机化其中的7个。如果我把7换成8，它只会把一切都按顺序显示出来。我不经常使用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>

$（文档）.ready（函数（）{
$（“.artifact”）.hide（）；
变量元素=$（“.mouther”）；
var elementCount=elements.size（）；
var-elementsToShow=7；
var alreadyChoosen=“，”；
var i=0；
而（i

的a似乎工作得很好：

//+ 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')));
});

试试这个

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

---

但是我不知道这样做是否有效。

要使所有元素都有效，您需要实际移动元素本身来洗牌它们，而不是随机隐藏其中的一些元素

下面是一个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);

---

这是一个。

这太聪明了！为了让它工作起来，我不得不对它进行一些修改：你对一个优雅的解决方案投了反对票，这太荒谬了。我投了赞成票。非常聪明。@Nathan Ostgard如果你有更多的div，那么你实际上想要显示，也就是说，你有10个字母，但你只显示了其中的7个。我想做的是有10个字母，然后随机显示所有10个字母。“有办法做到这一点吗？”安德鲁·麦克尼尔说，“啊，这有点复杂。这里列出的随机化方法都围绕隐藏和显示元素进行操作——随机可见性，但不是随机排序。您需要从DOM中删除元素，将它们洗牌，然后将它们全部添加回DOM中。你的元素都在单亲容器中吗？@Nathan Ostgard是的。每一个都被分配了类名“工件”，它们都被封装在一个类名为“grid-8”的div中。这就是你要问的吗？我看过JSFIDLE，它工作得很好，但是当我把它放到网站上时，它因为某种原因停止了。我注意到我给了你一个错误的类名，它是“grid_8”，但我确保改变了它，它仍然不起作用。看起来更像实际站点的功能我不确定为什么它对您不起作用——即使您链接的JSFIDLE也能起作用。您是否有可能将站点代码本身上传到某个地方？这是我正在处理的问题。@Andrew McNeil嗯，当我打开该页面并将代码粘贴到Firebug中时，它会按照预期的方式洗牌元素。你有什么JS错误吗？旁注：我更新了代码，在多次洗牌时它没有重新显示元素。@Nathan Ostgard我把：

$（'.grid_8'）.shuffle（'.worker'，4）在头部标记中，而不是在末端主体标记的正前方。它现在工作得很好。谢谢你的帮助！