以下のようなソースで、クリックされた要素の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>
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. …
<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>
$(this)で、自らのjQueryオブジェクトを表すことができ、それを引数にして、関数内のobj.attr('id)で、idが取得できるんですね(objは$(this)自体)。$(this)で、自らのjQueryオブジェクトを引数にして、利用できるということ大変勉強になります。ありがとうございます。
No.3
- 回答日時:
> 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ヶ所で済むから効率的ですよね。
とても詳しく、ありがとうございます。
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を使用するべきでしょう。
関数が中なのは、ソースを質問用に書いたのであまり考えてませんでした。外に出して使用しようと思います。
onclick属性は、リンク先ページを再読み込みしないようにってことでつけました。
aタグは、クリックできるようにつけました。
>極端に古いjqueryバージョンでない限り、clickイベントは、onを使用するべきでしょう。
そうなのですね。今度から、onを使用します。onに関して深くわかっていなのですが。
単独で関数を実行せずに、onの第二引数で実行するとthisがクラスalphabetのこととなって、idが取れるのですね。
勉強になります。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
テキストエリア内の一部の文字...
-
createElementが一瞬で消えてし...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
innerHTMLの初期値
-
背景色を透明化
-
console.log結果をhtmlで表示し...
-
IFRAMEの表示/非表示を切り替え...
-
JSで動的にリンクを作成
-
jQueryでクリックされた要素のi...
-
javascriptでオブジェクトの重...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
classの中の<a>タグにidを追加
-
変数内容をHTML内で表示する方法
-
[急ぎ] videoタグで埋め込んだm...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
HTMLタグに複数のクラスを設定...
-
変数名をどのようにつけるのが...
-
401エラードキュメントを401.ht...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
HTMLとJavaScriptで作ったタイ...
-
getElementByIdの戻り値がnull...
-
指定したパスが現URLに含まれて...
-
[急ぎ] videoタグで埋め込んだm...
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
removeAttribute()メソッドで削...
-
背景色を透明化
-
jQueryで同じid属性が複数あっ...
おすすめ情報