jsファイルを作り、更にfunctionの形にして呼び出す形にするとthisを使えないことに気が付きました。

Question

タイトル通りなのですが、

<div class="button_0405 unfiltered" title="how are you" style="width:100px;height:50px;">1</div>

というHTMLがあるとします。このHTMLの中に今までは、以下のjavascriptを入れていました（その押されたボタンの持つclassをalert表示するというものです）。今回、jsファイルとしてhtmlファイルと切り離そうとしました。すると、うまく動かないのです。

//これだと動かない
function updateSelectOption(){

	alert($(this).attr('class'));

}

$(function() {
	$("[class^=button_]").click(function() {

		updateSelectOption();

	});

});

そこで、以下のコーディングを考えました。

//これだとなんとか動く
function updateSelectOption(_class){

	alert(_class);

}

$(function() {
	$("[class^=button_]").click(function() {

		updateSelectOption($(this).attr('class'));

	});

});

しかしながら、なんか少し下手っぽい感じがします。引数に文字列は代入できるけど、例えば$(this).css()などをやりたいとなると、難しいです。もっとエレガントなthisの使い方はありそうでしょうか？

Comments

[2KOH]

質問の前にまずは「javascript function this」で検索して勉強しろと言うべきか、それとも先にタイトルの「functionの形にして呼び出す形」をはじめ意味不明な表現だらけの質問内容を、他人が読んで理解できるような文章に改めろと言うべきか……。

[退会済みユーザー]

こういう質問者をバカにするようなコメントは回答者としてどうかと思いますよ。
アドバイスというより命令や罵倒に近いです。
誰でも初めは知らないのです。たまたま知らないってだけで悪いことはありません。

また回答としては、とりあえずどうすればいいかというよりも、何が問題なのかというのを説明すべきです。
jQueryはイベントハンドラを呼び出す際に、thisにイベントが発生したDOM要素を入れて呼んでくれます(※)。
しかし、今イベントハンドラとして書いた匿名関数で、thisを使っていないので、呼ばれた先のupdateSelectOptionでthisが消えてしまっています。どうしても匿名関数の形を残したいのであれば、
updateSelectOption();ではなく
updateSelectOption.call(this);とする必要があります。ここでは指摘されているように匿名関数を使う意味がないので、こう変更するよりも、直接updateSelectOptionを引数に渡してしまった方が分かりやすいと思います。

(※)https://learn.jquery.com/events/event-basics/
"In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this."

[tiqua_nibio]

> 2KOH

すいません。
私はエンジニアなどの専門学校などを出ていないわけですので、ちゃんとコンピュータサイエンスなどを勉強していません。
「興味本位で開発している人が質問するな」と思われるかもしれませんし、私にとってこういうコミュニティは敷居が高いかもしれませんが、誠意で回答してくださる方も多いと思います。

> dameo

ご回答いただき、ありがとうございました。
※の情報は大変参考になりました。

[2KOH]

> dameo さん
この質問者はこのサイトですでに20回以上質問をしています。「誰でも初めは知らない」には当てはまりません。さすがにそろそろ質問の仕方に慣れてほしいと思い、上記のコメントをしました。

> tiqua_nibio さん
「わからないことはまず検索する」はネットを使う上での常識であり、このサイトのヘルプにも書かれています。専門学校は関係ありません。
また、わかりにくい文章についても、プログラミング用語の使い方を除けば日本語の問題です。専門学校ではなく、小中学校の問題です。
誠意で回答してくれる人がいると思っているのであれば、せめて上記に気を配るべきです。
それから、興味本位で大いに結構です。むしろ、仕事でやっているような人の方こそ給料もらっている分こんな無料サイトではなく有料サイトを利用してくれないかな、と思っています（ただし、これはただの自分の願望であり、このサイトのポリシーにも合わないため、仕事でやっている人を排除しようなどとは一切思っていませんが）。

まとめると、わからないことはまず検索してくれ、多少プログラミング用語の使い方が間違っていたとしても、できる限り日本語として意味の通る文章にすることを心がけてくれ、とりあえずその二点さえ守ってくれるならたとえ興味本位であろうと質問してくれて構わない、です。

Answer 1

関数をわざわざ作る意図はわかりませんが、そのまま渡せばよいです。

function updateSelectOption(){
    alert($(this).attr('class'));
}
$(function() {
    $("[class^=button_]").click(updateSelectOption);
});

Comments

[tiqua_nibio]

ありがとうございます。

関数を作るのは、複数のページでこれを動作させたいと思ったからです。
また、window.load時にも動くようにしたかったからです。

Answer 2

普通にthisを渡してやればいいのでは？

<script>
function updateSelectOption(){
  console.log($(arguments[0]).attr('class'));
}
$(function() {
  $("[class^=button_]").click(function() {
    updateSelectOption(this);
  });
});
</script>
<div class="button_0405 unfiltered" title="how are you" style="width:100px;height:50px;">1</div>

Comments

[tiqua_nibio]

なるほど、argumentsを使う辺りが、Javaのmainメソッドと重なりました。

[yambejp]

回りくどい書き方ですみません

updateSelectOption(this);
したやつを
function updateSelectOption(v){
console.log($(v).attr('class'));
}
と受ければいいだけです。