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

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