javascript - 我怎样才能使用这个 jQuery 对象？

Question

我正在构建一个主题，并且我喜欢仅当该元素在我的浏览器视口(viewport)中可见时才为该元素运行一些代码。为了实现这一目标，我找到了这段代码，但我不确定如何使用它:

$.fn.isOnScreen =   function()
{
    var win =   $(window);
    var viewport    =   {
        top  : win.scrollTop(),
        left : win.scrollLeft()
    };

    viewport.right  =   viewport.left   +   win.width();
    viewport.bottom =   viewport.top    +   win.height();

    var bounds      =   this.offset();

    bounds.right    =   bounds.left + this.outerWidth();
    bounds.bottom   =   bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

我试过这种方式:

$(this).isOnScreen().css('color', '#0AF');

但我在控制台中收到错误 Uncaught TypeError: undefined is not a function。

谁能帮我用这个方法，我该如何使用它？

Answer 1

isOnScreen() 函数返回一个 bool 值，而不是一个 jQuery 对象，因此您不能从它链接 jQuery 方法。试试这个:

if ($(this).isOnScreen()) {
    $(this).css('color', '#OAF');
}

此外，我不明白仅当某物在屏幕上时才更改其颜色的意义 - 如果它在屏幕外就无法看到，因此它只会被视为一种颜色。