jQuery를 사용하여 div 클래스를 랜덤하게 표시하기

여러 개의 동일한 class를 가진 div 중에서 하나만 랜덤하게 표시하고 싶은 경우가 있을 수 있습니다.

예를 들어, 다음과 같은 html 코드가 있을 때:

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>

로드할 때마다 이 3개 항목 중 임의로 하나만 표시해야 하는 경우가 있을 수 있습니다.

이 경우 다음과 같은 jQuery를 사용해볼 수 있습니다.

var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
// 출처: stackoverflow

여기에서 데모를 확인해볼 수 있습니다.

javascript로도 가능합니다.

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='';
}
// jsfiddle 데모

만약 여러 개 항목 중에서 특정 개수(예: 4개)만 표시해야 하는 경우에는 다음과 같은 jQuery를 사용할 수 있습니다.

HTML 코드:

<div class="Image"><img src="/image1.jpg">1</div>
<div class="Image"><img src="/image2.jpg">2</div>
<div class="Image"><img src="/image3.jpg">3</div>
<div class="Image"><img src="/image4.jpg">4</div>
<div class="Image"><img src="/image5.jpg">5</div>
<div class="Image"><img src="/image6.jpg">6</div>
<div class="Image"><img src="/image7.jpg">7</div>

jQuery 스크립트:

var divs = $("div.Image").get().sort(function(){
return Math.round(Math.random())-0.5; //so we get the right +/- combo
}).slice(0,4);
$(divs).show();
// 출처: stackoverflow

그리고 "Display Random Content with JavaScript" 글도 참고해볼 수 있습니다.

Leave a Comment

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드