javascript - 为什么这个变量会出现 "Uncaught TypeError: Cannot read property"错误？

Question

在this jsFiddle我有两个未定义或为空的变量。如果第一个变量被初始化，脚本就会工作，但如果第二个变量被使用，脚本就不会工作。您可以通过注释掉每一个并运行脚本来对此进行测试。

这是代码:

var test = $('.not-here').height(); // works with this variable
var test2 = $('.also-not-here').offset().top; // doesn't work with this

$('#output').append('yeah');

为什么我会遇到这个问题，我该如何解决？

Answer 1

您的两个选择器都无效，因此它们返回一个空的 jQuery 结果列表。

在空结果列表上调用 .height() 返回 null。在空结果列表上调用 .offset() 也会返回 null。

你在第二行得到 Uncaught TypeError: Cannot read property 'top' of null 的原因是因为你试图在结果上调用 .top() offset() 的 null。

基本上您正在尝试执行 null.top()。

我不知道你的代码是做什么用的，但作为一个纯粹的例子，你可以在使用它们之前先检查结果，类似于这样:

var $elem1 = $('.not-here');
var $elem2 = $('.also-not-here');

if($elem1.length && $elem2.length){
    var test = $elem1.height();
    var test2 = $elem2.offset().top;

    $('#output').append('yeah');
}