Question

我随机显示一定数量的div。但是，我想允许重复div，所以我假设我需要克隆多次选择的div。除了克隆部分之外我还有其他所有东西，如这个小提琴所示：

如您所见，如果多次选择div，它只会显示它的第一个实例。如果有人可以在必要时提供帮助克隆，那就太棒了。谢谢。下面是到目前为止的jQuery代码：

$("#button").click(function() {
  $("div.item").css("display", "none");
  var idValues = [];
  var randomValues = [];
  $("div.item").each(function() {
    idValues.push($(this).attr("data-id"));
  });
  for (var i = 0; i < 4; i++) {
    randomValues.push(idValues[Math.floor(Math.random() * idValues.length)]);
  }
  for (var j = 0; j < randomValues.length; j++) {
    group = randomValues[j];
    $('div.item').each(function() {
      if ($(this).attr("data-id") == group) {
        $(this).css("display", "block");
      }
    });
  }
});

编辑：我在想我需要插入这样的内容：

if ( $(this).length ) {
        $this.clone().appendTo("#container").css("display", "block");
    }

Answer 1

您可以在此大规模简化逻辑。首先设置单个.item元素池，这些元素不会更改，您可以使用这些元素随机选择。然后你可以有一个容器来附加原始克隆。然后你可以移除三个循环，只需要运行一个循环，为你选择一个随机.item div。试试这个：

$("#button").click(function() {
  var $poolDivs = $('#pool .item');
  var $randomContainer = $('#random').empty();
  for (var i = 0; i < 4; i++) {
    $randomContainer.append($poolDivs.eq(Math.floor(Math.random() * $poolDivs.length)).clone());
  }
});

Updated fiddle

从阵列中随机选择多次克隆Div

1 个答案: