2013-08-27 15 views
10

Chcę losowo wyświetlić klasy div przy użyciu JQuery. Kod jest coś takiego:losowo wyświetlić klasy div przy użyciu JQuery

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

Więc jeżeli sposób przypadkowy (losowy wynik jest w ciągu 1 do 4) daje 3 w wyniku, to pokazuje:

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

pozostałe są ukryte. Oczywiście kod można zmienić, aby działał. Dzięki.

Odpowiedz

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

Coś takiego:

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

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

+1

Twoje skrzypce nie pokazują odpowiedzi na to pytanie. – L84

23

Najpierw musimy dostać losową int, od zera do liczby elementów (minus 1). Następnie ukrywamy wszystkie pozostałe elementy i pokazujemy tylko losowo wybrany.

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

Demo

+0

wspaniała praca @gogoo –

2

przykład robocza: 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! //--> 
Powiązane problemy