Question

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

Answer 1

准备好脚本：我将颜色更改为绿色，以显示添加类show-post的效果。

＆＃13;

<!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>

＆＃13;

Jquery inview将类添加到最后一个元素

1 个答案: