类没有被点击切换

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?