$(this).toggleClass('active');が機能しません。

Question

前提・実現したいこと

クリックによって、 <a class="menu-botton" id="menu-botton">のクラスの切り替えを行いたいです。

該当のソースコード

                         <div class="header-icon">
                            <a class="menu-botton" id="menu-botton">
                                <div></div>
                                <div></div>
                                <div></div>
                            </a>
                        </div>

```document.addEventListener('DOMContentLoaded',function(){
    // document.getElementById('menu-botton').addEventListener("click", function(){
    //     this.classList.toggle('active');
    // })
    $('#menu-botton').on('click',() => {
        $(this).toggleClass('active');
console.log("i")
    });

});

試したこと

    $('#menu-botton').on('click',(e) => {
        $(e.target).toggleClass('active');

に変更すると、クリックされた、aタグないのdivに対してクラスの切り替えはできました。
なので、jqueryの読み込みや
$('#menu-botton').on('click',() => { }
の部分では問題はないのではないかと推測しております。
$(this)の書き方についても、確認をし、間違い無いのではと思いますが、なぜでしょうか。

ご教示いただければ、幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[int32_t]

jQuery の toggle() の引数はアニメーションの時間などを指定します。'active' を指定して何が起きると期待していますか?

追記: 失礼しました。「クラスの切り替えを行いたいです」と書いてありましたね。

[hemuu]

toggleClassについてはteratailでの記載ミスです。
コードエディタでは、正しく記載されております。

[int32_t]

では active クラスの付け外しは動いているのでは?
どのように問題を確認しましたか?

[hemuu]

デベロッパーツールでの確認となります。
document.getElementById('menu-botton').addEventListener("click", function(){
this.classList.toggle('active');
})
こちらの書き方なら、期待通りの動きをしました。
しかし、
$('#menu-botton').on('click',(e) => {
$(this).toggleClass('active');
console.log("i")
});

こちらでは、どこにもactiveクラスは付きませんでした。
ちなみに、クリック時にconsole.logの”i"は出力されました。

Answer 1

jQueryではアロー関数をつかってはいけません
コールバックするときはfunction(){を利用してください

Comments

[yambejp]

往々にしてアロー関数が参照するthisはwindow全体です
（場合によってはjsのクラスだったり）

[hemuu]

解決いたしました！アロー関数とfunctionで機能性の違いがあることを知りませんでした。調べてみるといくつか性質の違いがあることがわかりました。ありがとうございます。
基本的にjqueryでアロー関数を使わない方が無難ということでしょうか。
多くのプログラマーの方々は一般的にアロー関数を基本使わないのでしょうか。
もし宜しければ、ご教示いただけますでしょうか。

[yambejp]

jQueryはコールバック内でthisを多用する仕様なので
アロー関数を利用するとデメリットしかありません
ES6が一般的になった現状からすると流石に古い技術が
ベースになっているためjQueryを敬遠する人も多いでしょう。

[hemuu]

大変有益な情報をありがとうございます。

Answer 2

クラスの切り替えを行いたいです。

おそらく、使いたいのは toggle() ではなく toggleClass() でしょう。