jQueryでthisが想定通りの値にならない

Question

jQueryの挙動でわからないことがあるので質問します。

ボタンを3つ作ってその全てに同じクラスを割り当て、該当のクラスがクリックされたらクリックされたボタンだけに処理を行いたいのですが、
以下のコードで動かそうとすると上手くいきません。
クラスにクリックイベントを指定して、その中で$(this)を使えばクリックされたボタンだけ取得できると思ったのですが…
どうすればクリックしたボタンにだけ処理を付けられるのでしょうか（idを振らない形で実現するには？）？

  $('.menu-btn').click(() => {
    // const menuList = $('.menu-list');
    // 想定通り
    console.log($('.menu-list'));
    // thisが取得できない（windowをとっている）
    console.log($(this));
  });

コードはcodepenで公開しています。
https://codepen.io/datenshidon/pen/YadQyo

Comments

[m.ts10806]

外部サービスのURLだけではなく、念のため質問にもコード(HTML含めて）提示願います。

Answer 1

=>を使ったアロー関数は、thisを外側のthisに固定してしまうので、jQueryで返ってくるはずのthisを受け取ることができません。

取る手段としては2つ考えられます。

• =>ではなくfunctionでコールバックを書く
• (e) => {...}のように書いて、e.currentTarget（jQueryリファレンス）から同じ値を回収する

Comments

[退会済みユーザー]

ありがとうございます。想定通りに動きました。
まさかアロー関数がいけなかったとは考えつきませんでした！

Answer 2

arrow functionを使わずに、普通のfunctionで試してみて下さい。

追記

アロー関数式 は、function 式より短い構文で、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

Comments

[退会済みユーザー]

ありがとうございます。想定通りにうごきました！