jQueryでクリックされた要素のidを取得する方法
- jQueryを使用して、クリックされた要素のidを取得する方法について教えてください。
- 上記のコードでは、クリックされた要素のidを取得することができませんが、どのようにすれば取得できるのでしょうか？
- クリックされた要素のidを取得して表示するために、適切な方法を教えてください。
- ベストアンサー
jQueryでクリックされた要素のidを関数で取得
以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。 関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。 [htmlソース] <a class='alphabet' id='a' href='' onclick="return false;">A</a> <a class='alphabet' id='b' href='' onclick="return false;">B</a> <a class='alphabet' id='c' href='' onclick="return false;">C</a> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.alphabet').click(function(){ function alertAlphabet(){ alert($(this).attr('id')); }; alertAlphabet(); }); }); </script>
- h_mp
- お礼率97% (67/69)
- JavaScript
- 回答数3
- ありがとう数11
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか？ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('.alphabet').click(function () { // 直接指定 alert($(this).attr('id')); // 関数経由 alertAlphabet($(this)); }); }); function alertAlphabet(obj) { // objはjQueryオブジェクト alert(obj.attr('id')); }; </script> </head> <body> <a class='alphabet' id='a' href='' onclick="return false;">A</a> <a class='alphabet' id='b' href='' onclick="return false;">B</a> <a class='alphabet' id='c' href='' onclick="return false;">C</a> </body> </html>
その他の回答 (2)
- tracer
- ベストアンサー率41% (255/621)
> aタグは、クリックできるようにつけました。 JavaScriptでclickイベントを設定することによって、どんな要素でもクリックが可能になります。 マウスポインタが指マークになるようにするには、cssでcursor:pointerを指定するだけです。 >onclick属性は、リンク先ページを再読み込みしないようにってことでつけました。 どうしてもaタグが必要な場合は、関数内でreturn falseを指定することで同様の効果があるため、すべてのボタンにonclick属性は不要です。というより、javascriptはjavascriptにまとめて書かれたほうが効率が上がると思いますよ。 function alertAlphabet(){ alert($(this).attr('id')); return false; };
お礼
>JavaScriptでclickイベントを設定することによって、どんな要素でもクリックが可能になります。 >マウスポインタが指マークになるようにするには、cssでcursor:pointerを指定するだけです。 たしかにそうですよね。安易にaタグを使っていました。 >どうしてもaタグが必要な場合は、関数内でreturn falseを指定することで同様の効果があるため、すべてのボタンにonclick属性は不要です。というより、javascriptはjavascriptにまとめて書かれたほうが効率が上がると思いますよ。 関数内でreturn falseしてもよいのですね。 javascriptはjavascriptにまとめて書いた方が効率が上がるんですね。 たしかに、htmlにonclick=～とあるよりとてもすっきりすると思いますし、1ヶ所で済むから効率的ですよね。 とても詳しく、ありがとうございます。
- tracer
- ベストアンサー率41% (255/621)
質問文をそのまま受け取るならば、 $('.alphabet').click(function(){ $this = $(this); function alertAlphabet(){ alert($this.attr('id')); }; alertAlphabet(); }); 上記のような書き方で動くと思いますが、click関数の中に更に関数を設定しなければならないシチュエーションがなかなか思いつきません。 例のような場合であれば、以下の様な記述で事足ります。 $('.alphabet').on("click",alertAlphabet); function alertAlphabet(){ alert($(this).attr('id')); }; 1. 関数を外に出して何も問題がおきません。 2. html内のonclick属性も必要ありあせん。 3. href属性を使用しないのであれば、aタグである必要もありません。 4. 極端に古いjqueryバージョンでない限り、clickイベントは、onを使用するべきでしょう。
お礼
関数が中なのは、ソースを質問用に書いたのであまり考えてませんでした。外に出して使用しようと思います。 onclick属性は、リンク先ページを再読み込みしないようにってことでつけました。 aタグは、クリックできるようにつけました。 >極端に古いjqueryバージョンでない限り、clickイベントは、onを使用するべきでしょう。 そうなのですね。今度から、onを使用します。onに関して深くわかっていなのですが。 単独で関数を実行せずに、onの第二引数で実行するとthisがクラスalphabetのこととなって、idが取れるのですね。 勉強になります。ありがとうございました。
関連するQ&A
- jQueryのpostで生成した要素を無限に有効に
以下のような、jQueryのソースで、jQueryで生成したリンクを押すことによって$.postで生成したリンクで、.onを使って何回でもアラートが表示されるようにしたいのですが、1回目だけ出るのですが、それ以降は出ません。 何回でも出るようにするためには、どのようにすればいいですか。 また、postするデータmessage: 'message'も何回リンクをクリックしても、送信されるようにしたいです。よろしくお願いします。 $(function(){ $('#html').html("<a href='' onclick='return false' class='hello'>Hello</a>"); $('.hello').on("click", function(){ $.post("", { message: 'message', }, function(){ $('#html').html("<a href='' onclick='return false' class='hello'>Hello</a>"); alert('hello'); }); }); });
- ベストアンサー
- JavaScript
- jQueryのイベントに引数を渡したい
例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか？ 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false; } ); }); こういう場合はjQeuryであっても、onclick属性で関数を呼び出すのが普通なのでしょうか？ ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- jqueryについて
jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });
- ベストアンサー
- AJAX
- 関数の実行ができません
function printData($str) { print("alert($str)"); return true; } print("<td><a href=\"#\" onClick=\"alert($i);return false\">$i</a></td>\n"); 上記を参考に関数（printdata）の呼び出しをおこなったの ですがうまく呼び出しできません。 print("<td><a href=\"#\" onClick=\"new Function($this->printdata($i))\";return false\">$i</a></td>\n"); どなたかご存知でしたら教えてください。 よろしくお願い致します。
- ベストアンサー
- PHP
- jQueryでdivごとリンクする際の開き方の指定
jQueryでdivごとリンクする際に 新しいウィンドウで開くものと、同じウィンドウで開くものを分けたいのです。 下にコードを載せています。 素人なりにおかしいかと思っている点は、 同じfunction()を続けて使っているところです。 2つのスクリプトをそれぞれ1つだけ書いた時はうまく動作します。 どのように書いたらよいでしょうか？ よろしくお願いいたします。 ●新しいウィンドウで開きたいdiv要素 aaa,bbb,ccc ●同じウインドウで開きたいdiv要素 ddd,eee ------------------------------------------- <script type="text/javascript"> $(function(){ $(".aaa,.bbb,.ccc").click(function(){ window.open ( $(this).find('a').attr('href'), 'newwin' ); return false; }); }); </script> <script type="text/javascript"> $(function(){ $(".ddd,.eee").click(function(){ window.open ( $(this).find('a').attr('href'); return false; }); }); </script> -------------------------------------------
- ベストアンサー
- JavaScript
- ネストされたdiv要素の中のa要素をクリック
ネストされたdiv要素の中にa要素があるのですが、クリック出来ませんでした何かいい方法はありませんか？ <div id="j,click"> <div> <section id="sample03"> <a class="button99 picture1 radius box_shadow" href="#" onclick="disp(99)；return false；">戻る<a> </section> <div class="button99 lineargrad1"></div> <div class="box-area1-128 picture1-area1"></div> <div class="button99 linargrad2"></div> <div class="button99 shadow"></div> <div> <div> このように作成しました。 jQuery.biggerlinkではクリック出来るようになりましたが、javascriptの関数は呼び出すことは出来ませんでした。
- 締切済み
- その他(ソフトウェア)
- jQueryでdivをクリックし別窓で開くには？
jQueryでdiv全体をクリックできるようにできたのですが、 どうしても別窓で開く方法が分かりません。 もう、5時間ほど調べましたが、うまくいきません。 どなたか下のコードが別窓で開くように修正していただけませんでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> $(function(){ $(".sample").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script>
- ベストアンサー
- JavaScript
- クリックファンクションがうまくいかない
class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、 なぜかリストをクリックしても反応せずに削除されません。 id="maware"のliだけは、反応して削除されます。 CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか？ .link-block { display: block; z-index: 99999; } ・ソースコード <div class="kuruttosuru">aaa</div> <!-- drawermenu --> <!-- drawermenu-button --> <div class="modal-button-wrap"> <a class="animation-hover action-hover modal-button-wrap__button"> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> </a> </div> <!-- drawermenu --> <nav> <div id="nav__drawermenu-wrap"> <ul> <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> <!-- /drawermenu --> ・JS <script> $(function(){ $('.kuruttosuru').on('click', function() { $(this).addClass('active'); return false; }); }); </script> <!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション --> <script> $(function(){ $('.modal-button-wrap__button, .link-block').on('click', function() { $(this).removeClass('active'); return false; }); }); </script> ・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。 下記に何かおかしくなる要素があるのでしょうか？ <!-- ページ内遷移 --> <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 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
- JavaScriptでエレメントのIDを取得
JavaScriptで、エレメントのIDを取得する方法がわからず困っています。 [画像]ここをクリック [画像]ここをクリック 上記が画面配置のイメージなのですが、「ここをクリック」の文字をクリックした時に、そのクリックされた<a>タグのIDを取得したいのです。 以下が試行錯誤したソースの一部です。 [html] <img src="./test_01.gif" name="testImg01"> <a href="javascript" id="test_01" onclick="getID(this);">ここをクリック</> <img src="./test_02.gif" name="testImg02"> <a href="javascript" id="test_02" onclick="getID(this);">ここをクリック</a> [JavaScript] function getID(element) { var id = document.getElementById(id); alert(id); } 上記コードで得られたのは「null」という値でした。 色々検索してはいるのですが、思うように値を取得できません。 どうか知恵をお貸しください。
- ベストアンサー
- JavaScript
お礼
$(this)で、自らのjQueryオブジェクトを表すことができ、それを引数にして、関数内のobj.attr('id)で、idが取得できるんですね(objは$(this)自体)。$(this)で、自らのjQueryオブジェクトを引数にして、利用できるということ大変勉強になります。ありがとうございます。