2013-08-27 9 views
10

JQueryを使用してdivクラスをランダムに表示したいとします。コードのようなものである:ランダムな方法は、(ランダムな結果は1〜4の範囲内である)、結果として3を与えるのであればJQueryを使用してdivクラスをランダムに表示

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

、それは示しています

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

残りは隠されています。もちろん、コードを変更して機能させることができます。ありがとう。

答えて

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

そのような何か:

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

フィドル:http://jsfiddle.net/PPXmE/

+1

あなたのフィドルは、この質問のためにあなたの答えを示していません。 – L84

23

まず、ゼロからのアイテムの数(マイナス1)に、ランダムなint型を取得します。 他のすべての要素を隠し、ランダムに選択した要素だけを表示します。

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

Demo

+0

素晴らしい仕事@edgoo –

2

実施例: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=''; 
} 

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

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! //--> 
関連する問題