【JS】attrで属性を取得するとき…

このQ&Aのポイント
  • div全体をクリックしてリンクできるようにする方法
  • iframe内でリンクさせる際にtarget属性も取得する方法
  • JavaScriptの初心者がattrを使用してリンクを設定する方法
回答を見る
  • ベストアンサー

【js】attrで属性を取得するとき・・・

js初心者です。 div全体をクリックしてリンクできるようにしたいと思い、下記ソースを書いています。 (js) <script type="text/javascript"> $(function(){ $(".go_content").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script> (html) <div class="go_content"> テキストが入りますテキストが入ります。 <a href="http://xxxxxxx" target="_top" ></a> </div> これで、通常なら思ったとおりに動作してくれます。 しかし、このソースはあるページのなかにiframeで表示させます。 なので、<a>にtarget="_top"を指定しています。 上記スクリプトのままだと、aのhref属性しか取得できずに、フレーム内でリンクしてしまいます。 一緒にtarget属性も取得するにはどうすればよいのでしょうか? 何か良い方法があれば教えてください。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5085/13293)
回答No.1

以下のような感じではどうでしょう。 $(".go_content").click(function(){ var u=$(this).find("a").attr("href"); var t=$(this).find("a").attr("target"); window.open(u,t); return false; });

sanaeeeee
質問者

お礼

完璧にできました! めちゃくちゃ感謝です! ありがとうございます☆

関連するQ&A

  • jCarouselLiteループ時の属性値取得

    jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分5つの1ループ目はそれぞれ取得できるのですが、2ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){   alert($(this).attr("href"));//←2周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。

  • クリックするとするするとスクロールさせたい(JS)

    Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか? <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }

  • scrollsmoothly.jsが動かない

    質問させていただきます。 下記のscrollsmoothly.jsを設定したいのですが、どうしても うまく動作しません。 http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly ソースコードをDLして jsフォルダに入れました。 そして <head>~</head> の間に <script type="text/javascript" src="js/scrollsmoothly.js"></script> と記述しました。 そして <body> <div id="head"> ~ <a href="#head">topへ戻る</a> </body> と記述しました。 何か間違っていますでしょうか? よろしくお願いします。

  • thickbox.js使用時のフォームの取得方法をご教授願います。

    thickbox.jsを使用しているページで セレクトの値をPHPに渡したいと考えているのですが、 値の取得の仕方がわからず困っております。 ソースは以下のようなカンジです。 [値を取得]を押下した時セレクトボックスの値を取得しようとしています。Firebugでは以下のようにエラーがでます。 document.FrmThick.PrefectureCD has no properties どなたかアドバイス頂けますでしょうか? ----------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>Sample</title> <link rel="stylesheet" href="thickbox.css" type="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> </head> <body> <a href="#TB_inline?height=300&width=600&inlineId=condition" class="thickbox" title="条件を設定してください">ThickBoxについて</a> <style> #condition { visibility:hidden; } </style> <script> function test (){ alert(document.FrmThick.PrefectureCD.value); } </script> <div id="condition"> <form action="" method="get" name="FrmThick" id="FrmThick"> <!--都道府県--> <select id="PrefectureCD" name="PrefectureCD"> <option value="1">北海道</option> <option value="2">青森県</option> </select> <a href="javascript:test();">値を取得</a> <!--/都道府県--> </form> </div> </body> </html>

  • JSで動的にリンクを作成

    JSで動的にリンクを作成をしたいのですがわかりません。 例を教えてもらったのですがどう書いていいのかわかりません…。 駄目な例: <div id="link"> <a href="http://aaa.aa/">aaaa</a> </div> いい例 <div id="link"></div> <script> document.getElementByID("link") に対してaddChild </script> いろいろ不足していると思いますがお願いします。

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • <asp>タグの属性情報が取得できない

    いつも利用させていただいております。 宜しくお願いします。 今、VS2005のASP.NETを使用してプログラミングをしているのですが どうしてもタグの属性情報が取得できないため、ご存知の方が おりましたら是非アドバイスを・・・と思い投稿させていただいています。 以下にソースを記載いたします <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>test</title> <script language="javascript" type="text/javascript"> <!-- function test(){ alert(document.getElementById("Label1").getAttribute('Visible')); } // --> </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <asp:Label ID="Label1" runat="server" Text="Label" Visible="true"> </asp:Label> </div> </form> </body> </html> 上記ソースで「getElementById("Label1").getAttribute('Visible')」と言う部分が今回のターゲットです。 通常のHTMLタグ(div,・・・・)ですとなんら問題なくそれぞれの属性を取得できるのですが、こと<asp: タグで始まる属性を取得しようとすると・・・  ID→取得できました。  text→取得できません。  Visible→取得できません。 上記状態となってしまいます。 そこでご質問です。 ・<asp:タグの属性は[getAttribute]で取得できないのでしょうか? ・もし、取得できない場合は、何とか[Visible]をOnClickイベントで  "false"にしたいと考えています。 以上です。もしご存知の方がいましたら、なにとぞご教授の程 宜しくお願いします。 環境  WindowXP  VS2005 EnterPriseEdition  SQLServer2005

  • jQuery.lightpop.jsの動作について

    jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか?? ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>

  • js、 jQuery の手直しを助けてください

    js, jQuery 初心者です。下記のコードの手直しを助けて下さい このコードはページ内の複数設置されたリンクのいずれかをクリックすると 背景の画像がフェードしながら変わるというものです。 例えばリンク1を押すと背景画像1がフェードしながら呼び込まれ、 リンク2を押すと背景画像2が呼び込まれるといった感じです。 このソースコードを使うに当たって問題が2つあり、 初心者の自分では手直しできないため こちらに質問させていただきました。 問題1,Firefox 4 では作動するのに、他のブラウザではうごかない。 テスト済みブラウザ→ Chrome v.11.0, IE8, Safari 5 問題2、次画像のフェードインが、前画像のアウトの後にならないと読み込みが始まらない。 これだとフェード時に画像が一時期消える(真っ白になってしまう)時間ができてしまうので 出来れば次の画像をフェードなしでストレートに読込み、その上で前の画像をフェードアウトさせたいです。 どなたか問題解決の手直し方法をわかる方がいらっしゃいましたら ぜひ教えてください [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <style type="text/css"> #wrapper { width: 100%; height:100%; background-image:url(img/img1.jpg); background-repeat:repeat;} #container{ width:1000px; height:1000px;} </style> <script type="text/javascript"> $(function(){  $("#nav a").click(function(){   var val = this.rel, layer = $("#wrapper");   layer.fadeOut(500, function(){    layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeIn(500);   });  }); }); </script> </head> <body> <div id="wrapper"> <div id="container"> <div id="nav"> <a href="#" id="btn1" rel="img1">background1</a> <a href="#" id="btn2" rel="img2">background2</a> <a href="#" id="btn3" rel="img3">background3</a> </div> </div> </div> </body> </html> [/code]

    • ベストアンサー
    • AJAX
  • rel属性を複数使用したい

    XHTML 1.0 Strictなのでtarget="_blank"の代用で外部jsに function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload=externalLinks; として読み込みリンクに<a rel="external" ..........>としています。 その他にhighslide.jsを使用しているのですがrel属性が重複しているためか highslide.jsの動作は正常なのですがtarget="_blank"の代用の効果がありません。 rel属性が重ならないようにしたいのですが解決策はありますでしょうか? highslide.jsのURLです↓ http://vikjavev.no/highslide/