• RSS

[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は 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 による記事のランダム出力 デモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください