Question

我希望有一个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位于最顶部），除了一个隐藏之外。

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

Answer 1

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

.item{
display:none;
}

我认为这应该有用。

Answer 2

您的代码无效的原因是因为页面加载时所有item div都可见。您需要使用.item

将其隐藏在display: none; css中

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

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

我已经使用一些styling设置了 JSFIDDLE 。希望这有帮助

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

2 个答案: