使用jquery

Question

我将产品列在彼此之下（每个产品具有相同的类productItem），并想要创建以下内容

当用户滚动到产品并且当一个产品开始可见时，我需要在底部显示当前可见产品的一些信息，如价格，标题，链接等固定位置。

我已经尝试了以下代码，但它不起作用，因为我的元素具有相同的类

$.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));
    };
    jQuery(document).scroll(function(){
        alert(jQuery('.productItem').isOnScreen());
    });

我知道如何解决这个问题吗？

由于

Answer 1

您是否尝试将功能应用于每个元素？ 并且，您应该使用控制台来调试它，而不是警报;）

$('.productItem').each(function(){ 
    console.log($(this).isOnScreen());
});