用隐藏目录中的内容填充 div答案

【问题标题】：Fill divs with content from hidden directory用隐藏目录中的内容填充 div
【发布时间】：2018-01-21 14:57:02
【问题描述】：

我有一个隐藏目录 (.directory)，里面有几个 div (.content) 和不同的内容。

现在在页面加载时，我想从目录中随机选择一个 div (.content) 并将其放置在较低的可见 div (.box) 中。

隐藏目录的 div (.content) 比在可见 div (.box) 末尾应显示的要多。例如，我有 20 个隐藏的内容 div，但应该随机显示 3 个。

所以我的解决方案是，JS 计算页面加载，有多少名为“.box”的 div，然后从目录中随机选择计数的名为“.content”的 div 并放置在名为“.box”的 div 中.那会是正确的方法吗？

但我真的不知道该怎么做：D

我准备了一个小提琴：https://jsfiddle.net/m5sqwrpg/4/

这里是 HTML

<div class="directory">
  <div class="content">
    <div class="headline">Headline A</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline B</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline C</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline D</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline E</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline F</div>
    <div class="text">Some kind of Content</div>
  </div>
</div>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

还有 CSS：

.directory {
  display: none;
}

.content {
  margin-bottom: 20px;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}

非常感谢！

【问题讨论】：

标签： javascript jquery transfer

【解决方案1】：

以下内容应该可以帮助您入门：

$(document).ready(function(){
		$(".box").each(function(){
       var contentDivs = $(".directory .content");
       var contentToPick = Math.floor(Math.random()*(contentDivs.length));
       $(contentDivs[contentToPick]).appendTo($(this));
    });
});

.directory {
  display: none;
}

.content {
  margin-bottom: 20px;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.0.min.js"></script>
<div class="directory">
  <div class="content">
    <div class="headline">Headline A</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline B</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline C</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline D</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline E</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline F</div>
    <div class="text">Some kind of Content</div>
  </div>
</div>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

我不保证它会按照你想象的方式工作，所以最好给它一个适当的测试。

它应该基本上从每个“.box”的“.directory” div 中提取一个随机 div。它依赖于这样一个事实，即当我们从“.directory”中选择一个 div 时，我们实际上将它从“.directory”中删除以将其放入“.box”中，因此即使随机函数返回相同的索引，在第二遍时， div会有不同。

【讨论】：

【解决方案2】：

编辑：@Pavel Donchev 解决方案更好:)

最好更改元素的 CSS 样式以显示它们。

要选择定义数量的随机元素，您可以这样做：

function randomContent(numberOfElements){
		var i = 0; 
		var randomElements = $(".content").get().sort(function() {
        return Math.round(Math.random()) - 0.5;
    	}).slice(0, numberOfElements);
      
      
   while(i < randomElements.length) {
       if($(randomElements[i]).hasClass('show')){
        break;
      }
      else{
        $(randomElements[i]).addClass('show');
        i++;
      }
		}
}

randomContent(3);

.content {
  display: none;
  margin-bottom: 20px;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}
.show{
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="directory">
  <div class="content">
    <div class="headline">Headline A</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline B</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline C</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline D</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline E</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline F</div>
    <div class="text">Some kind of Content</div>
  </div>
</div>

工作 JSFiddle：https://jsfiddle.net/2m9tdgn2/

【讨论】：

感谢您的好话:)。但是，如果我的解决方案是由让我们说一个按钮触发的 - 您将在 3-4 次点击中几乎耗尽 div :)。

【解决方案3】：

您好，根据下面的代码理解，只需将该代码放在脚本标签下即可轻松解决您的问题。还包括 jquery.min.js 在您的 html 中。避免 $ 未定义 :)

$(document).ready(function(){
    drawRandomDivContent();
});
function drawRandomDivContent()
{
var container=$(".content");
var array=[];
var dataarray=[]
for(var i=0;i<container.length;i++)
{
   var number=getRandomInt(container.length);
   if($.inArray(number,array)==-1)
   {
        var selectedDiv=container[number];
        dataarray.push(selectedDiv);
        array.push(number);
        if(array.length==3)
        break;
   }
}
var destinationdiv=$(".box");
for(var i=0;i<dataarray.length;i++)
destinationdiv[i].innerHTML=dataarray[i].innerHTML;
}
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

【讨论】：