Jquery inview將類添加到最後一個元素

我試圖使用jquery inview插件將類添加到元素，當它在視口內。出於某種原因，插件僅將該類添加到最後一個元素，即使其他元素在視口中清晰可見。下面是我的代碼：Jquery inview將類添加到最後一個元素

HTML：

<div class="container-fluid"> 
    <article class="entry"></article> 
    <article class="entry"></article> 
    <article class="entry"></article> 
    <article class="entry"></article> 
    <article class="entry"></article> 
    <article class="entry"></article> 
</div>

的jQuery：

$(function() { 
    $('.entry').bind('inview', function (event, visible) { 
     if (visible) { 
      $(this).addClass('show-post'); 
     } 
    }); 
});

來源

2015-10-06 brandozz

把你裏面準備好腳本：我改變了顏色以綠色，以顯示該類show-post是有效果的添加。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>jquery.inview - Example</title> 
 
    <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
    <script src="https://protonet.info/wp-content/themes/protonet/js/jquery.inview.js"></script> 
 

 
<style> 
 
.show-post{ 
 
color:green; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="container-fluid"> 
 
    <article class="entry">hi</article> 
 
    <article class="entry">sfsdf</article> 
 
    <article class="entry">sdfsd</article> 
 
    <article class="entry">sdfds</article> 
 
    <article class="entry">sdfds</article> 
 
    <article class="entry">sdfs</article> 
 
</div> 
 
</body> 
 
<footer> 
 
<script> 
 
$(document).ready(function() { 
 
\t $('.entry').bind('inview', function (event, visible) { 
 
\t  if (visible) { 
 
\t   $(this).addClass('show-post'); 
 
\t  } 
 
\t }); 
 
\t 
 
\t }); 
 
</script> 
 
</footer></html>

來源

2015-10-06 04:36:35

我其實也有它在$（函數（）{....但它在頁腳不是標題。 – brandozz

嘗試採用這一點，看看它是否給任何問題。 –

我已更新答案，看看這是你想要的。 –

Jquery inview將類添加到最後一個元素

回答

相關問題