未捕获的类型错误：无法读取未定义错误的属性“顶部”

Posted 2023-03-16

【中文标题】未捕获的类型错误：无法读取未定义错误的属性“顶部”

【英文标题】：Uncaught TypeError: Cannot read property 'top' of undefined error

【发布时间】：2016-05-17 09:11:57

【问题描述】：

我想更改我的班级名称，我的页面从功能动画 div 顶部滚动 400，但我收到此错误。

请查看此链接以获取我的代码

https://jsbin.com/zafove/edit?html,js,output

 if(wScroll > $('.feature-animate').offset().top - 400 )
            $('.feature-animate').each(function(j)
                setTimeout(function()
                $('.feature-animate').eq(j).addClass('isShowing');
                ,100 * (i+1));

【问题讨论】：

在这行之前，你能在你的代码中打印console.log($('.feature-animate')) 并告诉我它在打印什么吗？

Uncaught SyntaxError: Unexpected token ILLEGAL

这段代码是在 document.ready 事件之后调用的吗？在调用此代码之前，您的 DOM 是否已经加载？

【参考方案1】：

错误信息表明 jquery 没有找到你的 html 节点，类为 .feature-animate。第一个也是最可能的原因：您的 html 代码中有错字。确保它看起来像这样：

<div class="feature-animate">...your other html code </div>

那么它应该可以工作了。

顺便说一句：如果您有多个具有相同类名的 div 容器，$('.feature-animate').offset().top 将获取 DOM 中具有该类的第一个元素的 top 值。

【参考方案2】：

确保feature-animate 类的元素在运行javascript 之前已经初始化。一个很好的方法是将它放在$(document).ready() 标记中。

【参考方案3】：

jQuery 无法找到 "feature-animate" 元素，因为在 html 中它是按照以下方式编写的。

    <div classs="row feature-animate"> 

（请注意 'classs' 中的 3 's'）

应该是这样的：

    <div class="row feature-animate"> 

(去掉多余的's'并使其成为'class')