• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:jQueryでクリックされた要素のidを関数で取得)

jQueryでクリックされた要素のidを取得する方法

このQ&Aのポイント
  • jQueryを使用して、クリックされた要素のidを取得する方法について教えてください。
  • 上記のコードでは、クリックされた要素のidを取得することができませんが、どのようにすれば取得できるのでしょうか?
  • クリックされた要素のidを取得して表示するために、適切な方法を教えてください。

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

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか? <!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>

h_mp
質問者

お礼

$(this)で、自らのjQueryオブジェクトを表すことができ、それを引数にして、関数内のobj.attr('id)で、idが取得できるんですね(objは$(this)自体)。$(this)で、自らのjQueryオブジェクトを引数にして、利用できるということ大変勉強になります。ありがとうございます。

その他の回答 (2)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.3

> aタグは、クリックできるようにつけました。 JavaScriptでclickイベントを設定することによって、どんな要素でもクリックが可能になります。 マウスポインタが指マークになるようにするには、cssでcursor:pointerを指定するだけです。 >onclick属性は、リンク先ページを再読み込みしないようにってことでつけました。 どうしてもaタグが必要な場合は、関数内でreturn falseを指定することで同様の効果があるため、すべてのボタンにonclick属性は不要です。というより、javascriptはjavascriptにまとめて書かれたほうが効率が上がると思いますよ。 function alertAlphabet(){  alert($(this).attr('id'));  return false; };

h_mp
質問者

お礼

>JavaScriptでclickイベントを設定することによって、どんな要素でもクリックが可能になります。 >マウスポインタが指マークになるようにするには、cssでcursor:pointerを指定するだけです。 たしかにそうですよね。安易にaタグを使っていました。 >どうしてもaタグが必要な場合は、関数内でreturn falseを指定することで同様の効果があるため、すべてのボタンにonclick属性は不要です。というより、javascriptはjavascriptにまとめて書かれたほうが効率が上がると思いますよ。 関数内でreturn falseしてもよいのですね。 javascriptはjavascriptにまとめて書いた方が効率が上がるんですね。 たしかに、htmlにonclick=~とあるよりとてもすっきりすると思いますし、1ヶ所で済むから効率的ですよね。 とても詳しく、ありがとうございます。

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

質問文をそのまま受け取るならば、 $('.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を使用するべきでしょう。

h_mp
質問者

お礼

関数が中なのは、ソースを質問用に書いたのであまり考えてませんでした。外に出して使用しようと思います。 onclick属性は、リンク先ページを再読み込みしないようにってことでつけました。 aタグは、クリックできるようにつけました。 >極端に古いjqueryバージョンでない限り、clickイベントは、onを使用するべきでしょう。 そうなのですね。今度から、onを使用します。onに関して深くわかっていなのですが。 単独で関数を実行せずに、onの第二引数で実行するとthisがクラスalphabetのこととなって、idが取れるのですね。 勉強になります。ありがとうございました。

関連するQ&A

専門家に質問してみよう