如何使用jQuery這個對象？

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控制台中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();