Question

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

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

隐藏目录中的div（.content）比可见div（.box）末尾显示的更多。例如，我有20个隐藏的内容div，但只应随机显示3个。

所以我的解决方案是，JS依靠页面加载，多少div命名为“.box”，然后随机从目录中选择名为“.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;
}

非常感谢你！

Answer 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会有所不同。

Answer 2

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

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JSFiddle ：https://jsfiddle.net/2m9tdgn2/

Answer 3

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

$(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));
}

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

3 个答案: