Question

在this jsFiddle中，我有两个未定义的变量或null。如果初始化第一个变量，该脚本可以工作，但如果使用第二个变量则不行。您可以通过注释掉每个脚本并运行脚本来测试它。

这是代码：

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');
}

Answer 2

如果节点不存在，

$('.also-not-here').offset()将返回null。这就是设计的工作方式。

由于您需要修复以便代码不会中断，您可以执行以下操作：

var $node = $('.also-not-here');
var test2 = $node.length>0 ? $node.offset().top : null;

Answer 3

var test = $('.not-here').height();

这会返回null，因为没有元素$('.not-here')。

再次，

var test2 = $('.also-not-here').offset();

这也会返回null，因为没有元素$('.also-not-here')，我们无法读取null的属性top。

我建议这样做：

$.fn.isThere = function(){ return this.length > 0; }

var $selector = $('.also-not-here');
if ($selector.isThere()) {
    var test2 = $selector.offset().top;
}

Answer 4

第一个test被设置为null。第二种情况是你试图引用一个空值的属性，它将抛出异常。

为什么我的变量出现“Uncaught TypeError：无法读取属性”错误？

4 个答案: