jQuery-inview只将类添加到视图中的第一个项

jQuery inview only add class to first item in view

本文关键字：第一个 视图 添加 jQuery-inview      更新时间：2023-09-26

我正在开发一个博客主题，该主题使用inview插件来使用J&K滚动，还可以将类应用于视图中的文章。唯一的问题是，由于我有一个分辨率很高的mac，一次查看的文章超过1篇，所以下面的脚本一次将类"inview"添加到（对我来说，通常是3篇文章）几篇文章中。有没有办法修改它，只在用户屏幕上的第一篇文章中添加类"inview"？从技术上讲，这可能不是页面上的第一篇文章，只是少数文章中的第一篇。感谢您的帮助。

$('article').each(function(){
        $(this).bind('inview', function (event, visible) {
            if (visible == true) {
                $(this).addClass("inview");
            }
            else {
                $(this).removeClass("inview");
            }
        });
    });

如果我正确理解你的问题，我认为你可以在.each函数中添加一个索引参数。像这样：

$('article').each(function(index){
        if( index == 0 )
        {
            $(this).bind('inview', function (event, visible) {
                if (visible == true) {
                    $(this).addClass("inview");
                }
                else {
                    $(this).removeClass("inview");
                }
            });
        }
    });

这将把类"inview"添加到第一篇文章中。

您可以始终转到jquery.inview.js的第97行，其中显示

$element.data('inview', visiblePartsMerged).trigger('inview', [true, visiblePartX, visiblePartY]);

在此之前，添加

if ($element.prev(".inview").length < 1)

因此，它检查在要触发visible=true的事件"inview"的元素之前是否存在类为"inview"的元素。

相关文章：