在jQuery中，即使初始选择器与其他a标记具有相同的类，在单击时如何引用它？

txtI正在使用jQuery执行以下操作：

• 选择a标记并将单击功能附加到该标记上
• 在函数中：
• 防止违约行为
• 获取clicked elements href属性，并在“html”后拆分它以保留ID
• 将实体设置为ID偏移的动画

这是我的密码：

$('.jumpto').click((e) => {
    e.preventDefault();
    var linktxt = $(this).attr('href');
    var link = $(linktxt).split('html')[1];

    $('html, body').animate({
        scrollTop: $(link).offset().top
    }, 200);
});

以及HTML：

<li><a href="your-stay.html#hot-tub" class="jumpto">Hot Tub Hire</a></li>
<li><a href="your-stay.html#dining" class="jumpto">Restaurants and Pubs</a></li>
<li><a href="your-stay.html#peak-district" class="jumpto">The Peak District</a></li>
<li><a href="your-stay.html#things-to-do" class="jumpto">Local Attractions</a></li>

---

我尝试了一些变体，但无法解决如何引用已单击的“jumpto”类的a标记？

问题是因为您使用的是箭头函数，因此

此

仍将引用定义处理程序的外部范围，而不是已单击的元素

你有两个选择。首先，您可以保留箭头功能，并使用

e.target

来引用单击的元素，而不是

this:

$('.jumpto').click((e) => {
  e.preventDefault();
  var linktxt = $(e.target).attr('href');
  var link = $(link).split('html')[1];

  $('html, body').animate({
    scrollTop: $(link).offset().top
  }, 200);
});

或者，您可以删除箭头函数并恢复使用匿名函数引用：

$('.jumpto').click(function(e) {
  e.preventDefault();
  var linktxt = $(this).attr('href');
  var link = $(link).split('html')[1];

  $('html, body').animate({
    scrollTop: $(link).offset().top
  }, 200);
});

最后请注意，只需将片段放入

href

属性，即可简化代码，如下所示：

<a href="#things-to-do" class="jumpto">Local Attractions</a>

更新在第4行使用变量'linktxt'时，我犯了添加jQuery'$'选择器的错误。

$('.jumpto').click(function(e) {
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 200);
});