- ベストアンサー
リンクのクリックでカラムの値を取得する方法
- PHP初心者の方がyoutube動画を紹介するサイトを作成している際、埋め込みタグの配置によりページが重くなる問題に直面しました。そこで動画の識別コードをデータベースに保存し、リンクをクリックした動画のみ別ページで再生する方法を模索しています。
- 具体的には、youtubeの埋め込みタグに含まれる動画の識別コードを配列に格納し、foreach文を使用して動画を並べることはできました。しかし、リンクをクリックした時にどの動画が選択されたのかを判別し、それに応じてデータベースからカラムの値を取得するスクリプトが必要です。
- さらに、将来的にはデータベース内の検索機能なども追加したいため、これらの機能を実現するためのスクリプトについてのアドバイスをいただきたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
クライアントサイドなのでPHPではなくJavaScriptで実装します。 以下ソースコードです（インデントが消されるので見にくいとは思いますが…）。 Chrome 1以上, Firefox 3.5以上, Safari 3.2以上, Opera 10以上, IE8以上で動作するはずです（querySelectorを実装しているかどうか）。 自由にカスタマイズして使ってください。 <!DOCTYPE html> <html＞ <head> <meta charset="utf-8"/> </head> <body> <ul> <!--この部分をPHPのforeachで出力--> <li><a href="#U-42Fcw5eFc" class="open-youtube">動画1</a></li> <li><a href="#a4hcoYYSlXk" class="open-youtube">動画2</a></li> <li><a href="#OMpvHCPN2Qo" class="open-youtube">動画3</a></li> <!--end--> </ul> <iframe width="640" height="390" src="" frameborder="0" id="youtube-viewer" allowfullscreen></iframe> <script> var list = document.querySelectorAll("a.open-youtube"); for(var i = 0; i < list.length; i++){ var f = function(e){ if(e.preventDefault){ e.preventDefault(); }else{ //for IE e.returnValue = false; } var target = event.target || event.srcElement; console.log(target); var hash = target.getAttribute("href"); var url = "http://www.youtube.com/embed/" + hash.substring(1); document.getElementById("youtube-viewer").setAttribute("src", url); return false; }; if(document.addEventListener){ list[i].addEventListener("click", f); }else{ //for IE list[i].attachEvent("onclick", f); } } </script> </body> </html>
お礼
遅くなりまして申し訳ありません。 プログラムを詳細に書いていただき非常に助かりました。 どうもありがとうございました。