ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

jQueryでランダムで関数を使えるようになったのでメモしておく

豊平川

画像などをランダム表示させたい。しかしサイトの作りがphpでなく普通のhtmlである。

画像の表示だけでなくリンク先なども変更したい。そういうときは変更する箇所の中身をまとめて乱表示させると手っ取り早いような気がするぞ!ってことで実際にjQueryで作ってみました。

実際のscript

※<>はすべて全角なので、コピペするときは<>を半角にしてください

まずはランダム表示させたい領域をdivタグで囲っておきます。

<div id="randam-area">ここはnoscript用で何か入れておく</div>

次にjQueryを読み込んだあとに以下のスクリプトを記述します。なお//以降はコメント(簡単な説明)です。

var ele = [ //変数 ele に[]内の文字を入れる
'あ',
'い',
'う' //最後の,は要らないよ
];
var ranEle = ele[Math.floor(Math.random() * ele.length)]; //変数 ranEleに変数eleのどれか一つを入れるよ
$('#randam-area').html(ranEle); //idタグrandam-areaの中を変数 ranEleで上書きするよ

↑こんな感じ。変数eleの中の「あ」「い」「う」をそれぞれ表示させたい画像やリンクを入れることで、自由なランダム表示ができるようになります。

  • <a href="hoge1"><img src="hogehoge1"<>/a>
  • <a href="hoge2"><img src="hogehoge2"<>/a>
  • <a href="hoge3"><img src="hogehoge3"<>/a>

例えば↑こんな感じ。この場合だとリンクと画像になりますね。もちろん記事直後の「おすすめ記事」や、サイドバーなどの広告をランダム表示にすることも可能です。けっこう汎用性は高いと思います。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです