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

Question

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

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

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

所以我的解决方案是，JS 依靠页面加载，有多少 div 名为“.box”，然后从中随机选择名为“.content”的 div 的数量div 中名为“.box”的目录和位置。那是正确的方法吗？

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

我准备了一个fiddle：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>

我不保证它会按照您设想的方式工作，因此最好对其进行适当的测试。

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

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

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

Fill divs with content from hidden directory

javascript

jquery

transfer