jQuery inview仅将类添加到视图中的第一项

Question

我正在研究使用inview插件使用J滚动的博客主题，并且还将类应用于正在查看的文章。唯一的问题是，因为我有一个大分辨率的mac，一次有超过1篇文章，所以下面的脚本将“inview”类添加到（通常对我来说，3篇文章）几篇文章时间。有没有办法修改这个，所以它只会将类“inview”添加到用户屏幕上的FIRST文章中？从技术上讲，这可能不是页面上的第一篇文章，只是少数文章中的第一篇。任何帮助表示赞赏。

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

      else { 
       $(this).removeClass("inview"); 
      } 
     }); 
    }); 

Answer 1

如果我正确理解你的问题，我认为你可以为你的.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”添加到第一篇文章。

Answer 2

你可以随时去jquery.inview.js线97，它说

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

权在此之前，加

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

，以便它检查是否有与类元素“ inview'之前，它想要触发事件'inview'with visible = true。