javascript - jQuery 扩展，无法读取未定义的属性

Question

我有这个代码:

var viewport = $(window),
    viewport_height = viewport.height();

var _topPanel = jQuery.extend({
    el: $('.js-lp_top'),
    //
    height: function() {
        var self = this;

        self.el.css('min-height', viewport_height);
    },
    scroll : function() {
        var self = this;
        var scrolled = viewport.scrollTop();

        viewport.on('scroll', function() {
            self.el.css({
                'top': (49 - (scrolled / viewport_height) * 80) + '%'
            });
        });
    }
});
var topPanel = new _topPanel.height().scroll();

还有一个 jQuery 错误，无法读取未定义的属性“css”。我做错了什么？谢谢帮助。

Answer 1

让我们首先检查一下这行代码。

 var topPanel = new _topPanel.height().scroll();

关键字new创建一个新的空对象。在 height 函数中，this 关键字引用这个新对象，它当然没有 el 属性。 self.el 未定义，因此出现错误消息 Cannot read property 'css' of undefined

此处需要进行两处更改:

1. 确保您的 height 和 scroll 函数返回 this，以支持函数链接

2. 调用 height 函数时不要包含 new 关键字

修改后的代码如下:

var _topPanel = jQuery.extend({
    el: $('.js-lp_top'),
    //
    height: function () {
        var self = this;

        self.el.css('min-height', viewport_height);
        return self;
    },
    scroll: function () {
        var self = this;
        var scrolled = viewport.scrollTop();

        viewport.on('scroll', function () {
            self.el.css({
                'top': (49 - (scrolled / viewport_height) * 80) + '%'
            });
        });
        return self;
    }
});
var topPanel = _topPanel.height().scroll();