2013-08-27 20 views
10

kullanarak bir div sınıfı görüntüleme JQuery kullanarak rasgele bir div sınıfını görüntülemek istiyorum. rastgele yöntem sonucunda 3 verir (rasgele sonuç 1 ila 4 içindedir) ise rasgele JQuery

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

Yani, gösterir:

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

kalanı gizlenir kodu gibi bir şeydir. Tabii ki, kod çalışmasını sağlamak için değiştirilebilir. Teşekkürler. Böyle

cevap

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

şey:

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

Fiddle: http://jsfiddle.net/PPXmE/

+1

Kemanınız bu soru için yanıtınızı göstermiyor. – L84

23

Önce sıfırdan madde sayısına, rastgele bir int almak (eksi 1). Sonra tüm diğer öğeleri gizleriz ve sadece rastgele seçilmiş olanı gösteririz.

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

Demo

+0

harika çalışma @edgoo –

2

Çalışma örneği: 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! //-->