辛いときには過去の偉人の名言で前向きな気持ちになろう
嫌なこと、辛いことがあったあなた、
なんとなく気分があがらないあなた、
どうしても頑張らないといけないあなた、
そんなあなたへ。。
次の名言を表示
今回のコード
html
|
1 2 3 4 5 |
<div id="area"> <div id="meigen"></div> <div class="nameArea"><a id="name" href="" target="”_blank”"></a></div> </div> <div id="next_btn">次の名言を表示</div> |
あとは偉人の名前からWikipediaにとべるようにaタグを使用しています。
また、aタグで「target=””_blank””」とすることで
リンクを押した際に新しいタブでページを開くようにしています。
名言や人物名は動的に取りたいのでこの時点では何も書いていません。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//名言と人物名のオブジェクト var meigenArr = [ {q: '楽しまずして何の人生ぞや。', c: '吉川英治', a: 'https://ja.wikipedia.org/wiki/吉川英治'}, {q: '必要なことはただ一つ、できると信じることだ。', c: 'アンソニー・ロビンズ', a: 'https://ja.wikipedia.org/wiki/トニー・ロビンズ'}, {q: 'いま歩いている道が気に入らなければ、新しい道を開けばいいのよ。', c: 'ドリー・パートン', a: 'https://ja.wikipedia.org/wiki/ドリー・パートン'}, {q: '失敗したからって何なのだ？失敗から学びを得て、また挑戦すればいいじゃないか。', c: 'ウォルト・ディズニー', a: 'https://ja.wikipedia.org/wiki/ウォルト・ディズニー'}, {q: '昔を振り返るのはここでやめにしよう。大切なのは明日何が起きるかだ。', c: 'スティーブ・ジョブズ', a: 'https://ja.wikipedia.org/wiki/スティーブ・ジョブズ'}, {q: '何度も何度も失敗した。それが成功の理由だ。', c: 'マイケル・ジョーダン', a: 'https://ja.wikipedia.org/wiki/マイケル・ジョーダン'}, {q: 'あなたの人生で起こる全てのことに感謝しなさい。それは全て経験だ。', c: 'ロバート・T・ベネット', a: 'https://en.wikipedia.org/wiki/Robert_T._Bennett'}, {q: 'あなたの問題ではなく、あなたの幸運を数えなさい。', c: 'ジグ・ジグラー', a: 'https://en.wikipedia.org/wiki/Zig_Ziglar'}, ]; //名言表示用関数 function meigenChoice(){ //名言オブジェクトからの取得用にランダムに整数値を取得 var meigenNum = Math.floor( Math.random() * ( meigenArr.length) ); if(meigenArr[meigenNum].q == jQuery('#meigen').text()) { meigenChoice(); }else { //名言オブジェクトより「名言」「人名」を各エリアにセット jQuery('#meigen').text(meigenArr[meigenNum].q); jQuery('#name').text(meigenArr[meigenNum].c); jQuery('#name').attr("href", meigenArr[meigenNum].a); } } //クリック時処理 jQuery('#next_btn').on('click', function(){ meigenChoice(); }); //初回表示用 meigenChoice(); |
では、いくつかに分けて簡単に解説します。
|
1 2 3 4 5 6 7 8 9 10 11 |
//名言と人物名のオブジェクト var meigenArr = [ {q: '楽しまずして何の人生ぞや。', c: '吉川英治', a: 'https://ja.wikipedia.org/wiki/吉川英治'}, {q: '必要なことはただ一つ、できると信じることだ。', c: 'アンソニー・ロビンズ', a: 'https://ja.wikipedia.org/wiki/トニー・ロビンズ'}, {q: 'いま歩いている道が気に入らなければ、新しい道を開けばいいのよ。', c: 'ドリー・パートン', a: 'https://ja.wikipedia.org/wiki/ドリー・パートン'}, {q: '失敗したからって何なのだ？失敗から学びを得て、また挑戦すればいいじゃないか。', c: 'ウォルト・ディズニー', a: 'https://ja.wikipedia.org/wiki/ウォルト・ディズニー'}, {q: '昔を振り返るのはここでやめにしよう。大切なのは明日何が起きるかだ。', c: 'スティーブ・ジョブズ', a: 'https://ja.wikipedia.org/wiki/スティーブ・ジョブズ'}, {q: '何度も何度も失敗した。それが成功の理由だ。', c: 'マイケル・ジョーダン', a: 'https://ja.wikipedia.org/wiki/マイケル・ジョーダン'}, {q: 'あなたの人生で起こる全てのことに感謝しなさい。それは全て経験だ。', c: 'ロバート・T・ベネット', a: 'https://en.wikipedia.org/wiki/Robert_T._Bennett'}, {q: 'あなたの問題ではなく、あなたの幸運を数えなさい。', c: 'ジグ・ジグラー', a: 'https://en.wikipedia.org/wiki/Zig_Ziglar'}, ]; |
“名言”、”人物名”、”wikipediaのパス”をセットで代入しています。
(変数名にArrとついていますが配列ではありません。
紛らわしくてすみません。。)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//名言表示用関数 function meigenChoice(){ //名言オブジェクトからの取得用にランダムに整数値を取得 var meigenNum = Math.floor( Math.random() * ( meigenArr.length) ); if(meigenArr[meigenNum].q == jQuery('#meigen').text()) { meigenChoice(); }else { //名言オブジェクトより「名言」「人名」を各エリアにセット jQuery('#meigen').text(meigenArr[meigenNum].q); jQuery('#name').text(meigenArr[meigenNum].c); jQuery('#name').attr("href", meigenArr[meigenNum].a); } } |
まずランダムに名言を表示するため、「meigenArr.length」でオブジェクトの数分のランダム整数値を取得します。
次のif文では現在セットされている名言と次セットする名言が同じであれば
再度自分自身で関数を呼び出し、別の名言が取得できるまで処理を繰り返します。
別の名言が取得できたら、名言、人物名、リンク先を設定します。
|
1 2 3 4 5 6 7 |
//クリック時処理 jQuery('#next_btn').on('click', function(){ meigenChoice(); }); //初回表示用 meigenChoice(); |
最後にクリック処理です。
ボタンを押された時に上で定義した
「meigenChoice」関数を呼び出すのみの処理ですね。
ただ、それだけだと最初に読み込んだ時点では
名言が表示されない状態となるため、初回表示用として一度関数を呼び出しています。
まとめ
今回は「オブジェクトの使い方」「関数を再帰的に呼び出す」「動的にリンクを貼る」
といった処理を使ってみました。
オブジェクトの中身を変更するだけで、色々と表示することができると思いますので
興味があるかたは試してみてください。
もう少し名言を増やして、自分でも行き詰まったときや
頑張りたいときにはこの記事で前向きになれればいいですね。
ミニクイズコーナー
解説
コメントを残す