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。