[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」
スポンサード
以下の例だと、
以下のページにサンプルを用意しています。
randomDisplay.js による記事のランダム出力 デモ
スポンサード
この記事は Web Tips Blog 様の記事を参考にさせていただきました。
例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。
jQuery を使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、(javascriptが使えれば)無料のブログサービスや企業サイトなどでも利用できるので、汎用性が高く便利なjavascript です。
randomdisplay.js のダウンロード
ファイル名は自由に変更できますが、以下のページにソースコードが公開されていますので、randomdisplay.js などの名前で保存します。randomDisplay.js の設置
<head>内に、jQuery ファイルと合わせて以下のように設置します。<script src="jquery.min.js" type="text/javascript"></script> <script src="randomdisplay.js" type="text/javascript"></script>※モジュール提供元のサイトではjquery 1.3.2 で動いていますが、jQuery ファイルのバージョンによっては上手く動きません。
記事をランダムで表示させる
ランダム表示をしたい要素の親要素にrandomdisplay="n"
を追記します。以下の例だと、
<li>
でマークアップした5件のリストの中から、randomdisplay="2"
の件数(2件)をランダム表示させることになります。<ul randomdisplay="2"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul>
randomdisplay="2"
の値を3、4…とすることで、3件、4件…とランダム表示させる件数を変更できます。以下のページにサンプルを用意しています。
randomDisplay.js による記事のランダム出力 デモ
スポンサード
コメント