Question

我正在构建一个主题，只有在浏览器的视口中看到此元素时，我才会为元素运行一些代码。为了实现这一点，我发现了这段代码，但我不确定如何使用它：

$.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()函数返回一个布尔值，而不是一个jQuery对象，所以你不能从中链接jQuery方法。试试这个：

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

另外，我不明白改变某些东西颜色的重点 - 只要它在屏幕上 - 如果它在屏幕外是不可见的，那么它会只被视为一种颜色。

Answer 2

您可以先使用.css()设置css，然后返回当前对象，然后使用您编写的isOnscreen方法：

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

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

2 个答案: