類沒有被點擊切換

Question

我有一個包含鏈接的導航控件。

當用戶點擊鏈接時，我想切換兩個鏈接的類屬性。

我想爲點擊鏈接指定一類「定向」。

我也想從前面選定的鏈接中移除'目標'類。

這裏是我目前的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沒有自己的this，因此jQuery的不能將其設置爲當前元素。您必須使用「正常」功能作爲事件處理程序，或者使用e.target或e.currentTarget（不確定此功能與事件委派的效果如何），而不是this。

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