0

我正在尝试使用 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');
        }
    });
});
4

1 回答 1

0

把你的脚本放在里面准备好了：我把颜色改成绿色来显示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() {
	$('.entry').bind('inview', function (event, visible) {
	    if (visible) {
	        $(this).addClass('show-post');
	    }
	});
	
	});
</script>
</footer></html>

于 2015-10-06T04:36:35.137 回答