刷新后在div中随机显示内容答案

【问题标题】：Randomly display content in a div after refresh刷新后在div中随机显示内容
【发布时间】：2015-12-22 10:12:02
【问题描述】：

我想要一个在刷新后随机显示内容的 div。我找到了一个有效的代码，但它不是 100% 有效，所以我试图在这里找到错误。

在使用 [this] (randomly display a div class using JQuery) 问题的代码后，我被要求将其作为新主题发布，但它无法正常工作。

标题中的代码：

window.onload=function() {
  var E = document.getElementsByClassName("item");
  var m = E.length;
  var n = parseInt(Math.random()*m);
  for (var i=m-1;i>=0;i--) {
  var e = E[i];
  e.style.display='none';
  }
  E[n].style.display='';
}

在正文中我有以下内容

<div class="item">Lorem ipsum dolor</div>
<div class="item">Lorem ipsum dolor sit amet</div>
<div class="item">Lorem ipsum </div>
<div class="item">Lorem </div>

加载页面时，它会显示所有item-divs，然后在加载其余部分后（div 位于最顶部），除了一个之外，其他所有内容都被隐藏。

为什么会这样？代码怎么改，其他内容都不显示？

【问题讨论】：

这个jsfiddle.net/53k5h2v3/1 对你有用吗？
完美！！！！太感谢了！像魅力一样工作
不客气@Caro。如果对您有帮助，请将我的解决方案标记为答案。

标签： jquery random

【解决方案1】：

您的代码不起作用的原因是您的所有item div 在页面加载时都是可见的。您需要使用display: none; 将它们隐藏在.item css 中

因为你也标记了 JQuery，你可以像这样更新你的 JS

$(function(){
    var random = Math.floor(Math.random() * $('.item').length);
    $('.item').eq(random).show();    
});

我已经建立了一个有效的 JSFIDDLE 和一些 styling。希望这会有所帮助

【讨论】：

【解决方案2】：

与其保持所有 div 可见并隐藏一些脚本 - 让所有 div 从一开始就隐藏起来，让脚本只显示随机的。
为此，只需将以下样式与现有代码一起添加到您的 HTML 中：

.item{
display:none;
}

我认为这应该可行。

【讨论】：