刷新后随机显示div中的内容

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

在使用[this]的代码（ 使用JQuery随机显示div类 ）问题之后，我被要求将此作为一个新主题发布，但它无法正常工作。

标题中的代码：

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=''; } 

在身体我有以下

 
Lorem ipsum dolor
 
Lorem ipsum dolor sit amet
 
Lorem ipsum 
 
Lorem  

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

为什么会这样？ 如何更改代码以便其他内容根本不显示？

Answer 1

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

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

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

我已经提出了一个有一些styling JSFIDDLE 。 希望这可以帮助

Answer 2

而不是让你的所有div都可见，你的脚本隐藏了一些 – 让所有的div都隐藏在开头，让你的脚本只显示随机的。
为此，只需将以下样式与现有代码一起添加到HTML中：

 .item{ display:none; } 

我认为这应该有效。