たとえば、次のような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=''; }
>> デモ
その後、上記のスクリプトと同じようにランダムに表示されます。
参考までに WordPressでコンテンツをランダムに表示したい場合 Random Contentというプラグインを使用することができます。 このプラグインを使用すると、コンテンツを追加して、グループ化してグループごとにコンテンツを表示することができます。
現在、このプラグインをした WordPress サイトでよく使用されています。 しかし、1年以上の更新がされていないですね。 現在までよく動作しますが、今後の最新 WordPressと互換性の問題が発生する可能性も排除できないようです。 同様の機能のプラグインを検索してみると、ほとんどの古いプラグインしか検索されていないですね。
もし、上記のプラグインが後日問題が発生した場合は、少し面倒な場合があるが、上記で述べたjQueryを使用してみることができるようになります。
コメントを残す