- ベストアンサー
JavaScriptでHTMLのIDを取得する方法
- JavaScriptを使用して、クリックされたa要素のIDを取得する方法を説明します。
- テスト1.htmlでは、AとBという文字のリンクがあり、クリックされた文字のIDを次に表示されるHTMLで使用したいと考えています。
- テスト2.htmlでは、地図C、文字A、文字Bが表示されています。マウスオーバーによって地図上の画像が光るようになっており、クリックした文字のIDに基づいて処理が変わるようにしたいと考えています。
- masa_tokai
- お礼率88% (31/35)
- JavaScript
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
サンプルをきちんと書きます。(完全じゃないですが) test1.html <html> <body> <a href="http://test2.html?test_1" title="A">A</a> <a href="http://test2.html?test_2" title="B">B</a> </body> </html> test2.html <html> <head> <script> window.onload = function(){ var url_str = window.location.href; // 下は"?"の文字でurl_strを分割してます。 var parm=url_str.split("?"); if (parm.length>0){ alert(parm[1]); } } </script> </head> <body> </body> </html>
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
いったんこの質問をクローズして, 整理した上で、イメージ画像を載せたりして 別件にて、質問した方が回答がつきやすいかと... いまいちイメージがつかめません。
お礼
分かりました。 ありがとうございます。
- yyr446
- ベストアンサー率65% (870/1330)
<a href="http://test2.html?test_1" title="A">A</a> で呼ばれたtest2.htmlでは window.onload = function(){ parm = window.location.href.split("?"); alert(test[1]); } これで?以降がアラートされます。
お礼
ありがとうございます。 試したのですが、できませんでした。 >parm = window.location.href.split("?"); ？の中には何か記述はいるのでしょうか？ クリックしたら、エラーがでてtests2.htmlにも飛びません。 何が原因なのでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
確認 ＜＜２）クリックされてaのhrefに記載されていたURL（test2.html）に飛ぶ時に１）で取得したIDを一緒に飛ばす。＞＞ 飛ばすのが困難だと思います。 test1.htmlとtest2.htmlは遷移するのですよね。 対処 Ａ.cookieを使う Ｂ.urlの後ろに＃ｘｘｘとか？ＸＸＸを擬似的に 付けて、location.hrefで拾う。 Ｃ.PHP等サーバサイドのプログラムで受け渡す。 test1.htmlとtest2.htmlを統合するなり、フレームを使うなり すれば、他にも方法がある。
お礼
早々のご回答感謝いたします。 対処法を3つも書いていただいてありがとうございます。 参考にさせていただきます。
- steel_gray
- ベストアンサー率66% (1052/1578)
test1.htmlのアンカーにクエリとして情報を書いておけばjavascriptとか使わなくても情報は渡せます。 <a href="http://test2.html?test_1" title="A">A</a> <a href="http://test2.html?test_2" title="B">B</a> test2.htmlではdocument.locationでURL中の?以降を取得する事ができます。 http://www.tohoho-web.com/js/location.htm#location
お礼
ありがとうございます。 こういうやり方もあるのですね。 勉強になります。 しかし、test2.htmlのjavascript内で $(document).ready(function(){ test = window.location; alert(test); }); 又は、 window.onload = function(){test = window.location; alert(test); } としてみましたが、どちらもアラートが表示されません。 受け取れているのかどうか確認がしたのですが・・・。 prototype.js effects.jsが関係しているのでしょうか？
お礼
ソースまで付けていただいて感謝いたします。 検証してみたところ完璧にできました。 ありがとうございます。
補足
追記質問があります。 test2.htmlの方で window.onload = function(){ var url_str = window.location.href; // 下は"?"の文字でurl_strを分割してます。 var parm=url_str.split("?"); if (parm.length>0){//alert(parm[1]); }if(parm[1] == "test_1"){ //地図上のDと文字Aが光る処理 ChengeColorOn('7'); image1.start(1); 皆さんのおかげで、上記のソースで光ることはできました。 もう少しで完成です。 今度はtest2.html内で5秒間だけ、もしくはマウスが何かに触れるまで、光り続ける。 つまり、一定時間、又はマウスが動くまで指定の関数を呼び出したいのです。 そういうのは可能でしょうか？ } }