javascript - JQuery 插件中的 this.selector - 无法读取未定义的属性 'top'

Question

我见过很多关于此错误的问题，但没有一个对于这种情况有很大帮助。

我正在尝试编写 JQuery 插件，但收到错误“未捕获的类型错误:无法读取未定义的属性“顶部””。似乎与“这个”相关。例如，这似乎工作正常:

 $(window).scroll(function() {
    var offsetBot = window.innerHeight - (($("#textBox1").offset().top - $(window).scrollTop()) + $("#textBox1").height());
    console.log(offsetBot);
  });

但是在下面的函数内部，我收到错误..

$.fn.offBottom= function() {

$(window).scroll(function() {

      if (!this.length) {
        console.log("no element selected")
        return;
      } else{
        var offsetBot = window.innerHeight - (($(this.selector).offset().top - $(window).scrollTop()) + $(this.selector).height());
      }});
  };

  $("#textBox1").offBottom();

});

我尝试过使用“this”、“$(this)”和“this.selector”，但都没有成功。谢谢

Answer 1

您已将 $(this) 上下文放置在 $(window) 滚动函数中。这就是为什么你得到 DOM 的元素 [未定义]，因此你无法获取它的 top 属性

您可能需要在此之前初始化 DOM 元素，如下所示:

$.fn.offBottom = function() {
    var oElement = $(this); // $(this) will refer to the DOM that called the [offBottom] property method

    $(window).scroll(function() {
        if (oElement.length) {
            console.log("no element selected");
            return false;
        } else {
            console.log(oElement.offset().top);
            var offsetBot = window.innerHeight - ((oElement.offset().top - $(window).scrollTop()) + $(this.selector).height());
        }});
};

$("#textBox1").offBottom();

希望这对您的情况有所帮助