Question

当用户滚动到某个div时，我有一些代码可以将类active添加到导航中。我也使用vue.js并且有一些不使用导航的组件。在这些组件中（我不使用导航）我收到错误： Uncaught TypeError: Cannot read property 'top' of undefined 代码：

$(document).ready(function () {
  $(window).scroll(function () {
     var y = $(this).scrollTop();
     $('.link').each(function (event) {
       // this code allows me to disable script when there's no navigation
       if(!event.length) {
         return;
       }
       if (y >= $($(this).attr('href')).offset().top) {
          $('.link').not(this).removeClass('active');
          $(this).addClass('active');
       }
     });
  });
});

此代码允许我在没有导航的情况下禁用脚本，但它也会破坏其余的代码，所以在主页面上有导航，没有添加类。

  if(!event.length) {
     return;
   }

Answer 1

检查元素是否未定义

if($($(this).attr('href')).offset() != undefined && y >= $($(this).attr('href')).offset().top)

我编辑了这个答案：

.each(function(index, element){})

你可以在这里看到event这里只是变量的名称，如果它登录到控制台，你会发现它代表索引$('.link').each(function (event){}) 所以event.length毫无意义 REF：。 https://api.jquery.com/each/

.link选择器往往用于收集锚链接
$($(this).attr('href')) <a href="#selectorId">menu item</a>所以，如果你的元素没有href，那么就会抛出undefined

Answer 2

看来你期待'事件＆＃39;成为这段代码的集合：

   if(!event.length) {
     return;
   }

此代码：

$('.link').each(...)

传递由$('.link'), and it appears that single item should be and HTMLAnchorElement. The HTMLAnchorElement does not have a length property. The length property comes through the inheritance heirarchy for the`标记创建的jQuery集合中的单个项目。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement

看来你的意图可能是在伪代码中做这样的事情：

抓取所有链接（将它们放入集合中）
如果没有链接（集合的长度为零）不做任何事
否则（有链接）对于每个链接找到要突出显示的链接将active类添加到该元素

这是不您的代码所做的事情。

如果您有任何疑问，请与我们联系。

活动导航项

2 个答案: