クラスはクリック時にトグルされません

Question

リンクを含むナビゲーションコントロールがあります。

ユーザーがリンクをクリックすると、2つのリンクのクラス属性を切り替える必要があります。

クリックしたリンクに 'targeted'のクラスを割り当てたいとします。

また、以前に選択したリンクから「ターゲット」クラスを削除したいと考えています。

ここは私の現在のes6 jsです。

$(() => { 
 
//when one is clicked, remove the class from each of them and then add the class to the one that was clicked 
 
    $(document).on("click", ".tools-cover .tools-container > .row > .col-xs-12 > nav ul li a", (e) => { 
 

 
     $(document).find(".tools-cover .tools-container > .row > .col-xs-12 > nav ul li a").removeClass("targeted"); 
 

 
     $(this).toggleClass("targeted"); 
 

 
    }); 
 

 
//when the page has loaded, click the first nav link on the nav 
 
    $(document).find(".tools-cover .tools-container > .row > .col-xs-12 > nav ul li:first-child a").click(); 
 
});

<div class="tools-cover"> 
 
    <div class="container tools-container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <nav> 
 
      <ul> 
 
      <li><a href="#">Feeds</a> 
 
      </li> 
 
      <li><a href="#">Wearisma links</a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Arrow functions jQueryの現在の要素に設定することはできませんので、this自分自身を持っていません。イベントハンドラとして「通常」の関数を使用するか、thisの代わりにe.targetまたはe.currentTarget（イベント委任でどれくらいうまく動作するかはわかりません）を使用する必要があります。

もArrow function vs function declaration/expressions: Are they equivalent/exchangeable?