random content

jQuery를 사용하여 DIV를 랜덤하게 표시하기

예를 들어, 다음과 같은 HTML 코드가 있을 경우 jQuery를 사용하여 DIV 요소를 랜덤하게 표시할 수 있습니다.

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

간단하게는 다음과 같은 스크립트를 사용할 수 있습니다.

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

>> 데모

또는, 다음가 같은 스크립트도 가능합니다.

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

>> 데모

그러면 위의 스크립트와 동일하게 무작위로 표시됩니다.


참고로 워드프레스에서 콘텐츠를 랜덤하게 표시하려는 경우 Random Content라는 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 콘텐츠를 추가하고 그룹화하여 그룹별로 콘텐츠를 표시할 수 있습니다.

random content

현재 이 플러그인을 한 워드프레스 사이트에서 잘 사용하고 있습니다. 하지만 1년이 넘도록 업데이트가 되고 있지 않네요. 현재까지는 잘 작동하지만 추후에 최신 워드프레스와 호환성 문제가 발생할 가능성도 배제할 수 없을 것 같습니다. 비슷한 기능의 플러그인을 검색해보니 대부분 오래된 플러그인밖에 검색이 되지 않네요.

만약 위의 플러그인이 추후에 문제가 발생한다면, 약간 번거로울 수 있겠지만 위에서 다룬 jQuery를 사용해볼 수 있을 것 같습니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.