【问题标题】：randomly display a div class using JQuery使用 JQuery 随机显示一个 div 类
【发布时间】：2013-08-27 22:37:46
【问题描述】：

我想使用 JQuery 随机显示一个 div 类。代码是这样的：

<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>

因此，如果随机方法（随机结果在 1 到 4 之间）给出 3 作为结果，则显示：

<div class="item">Three</div>

其余的都是隐藏的。当然，可以更改代码以使其正常工作。谢谢。

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

首先我们得到一个随机整数，从零到项目数（减 1）。然后我们隐藏所有其他元素，只显示随机选择的元素。

var random = Math.floor(Math.random() * jQuery('.item').length);
jQuery('.item').hide().eq(random).show();

Demo

【讨论】：

我有同样的功能，但是如何去显示两个随机的div。我应该运行两次吗？

【解决方案2】：

var number = Math.floor(Math.random()*3)
var div = $(".item")[number];
div.show();

【讨论】：

【解决方案3】：

类似的东西：

$('.item').hide().eq(Math.floor(Math.random()*4)).show()

小提琴：http://jsfiddle.net/PPXmE/

【讨论】：

你的小提琴没有显示你对这个问题的答案。

【解决方案4】：

工作示例：jsFiddle

js

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

js.minified

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

html

<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<!-- Add as many as you want! //-->

【讨论】：

【解决方案5】：

使用 setInterval 函数。

工作示例：http://jsfiddle.net/a0c0ntjc/

setInterval(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='';
},3000);

【讨论】：