Question

我正在尝试向视口中的.column类的所有实例添加一个类。

This JS Fiddle向视口中的所有.swoosh添加一个类.column，但是当我使用与我的标记完全相同的js时，它不会将.swoosh类添加到视口中的.column。

我检查了jquery是否正在加载，它是。
代码有效，因为它适用于JS Fiddle

但由于某些原因，this page中视口中的.column未获得课程.swoosh。

以下是我尝试运行的代码：

function isElementInViewport(el) {
var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document. documentElement.clientWidth)
    );
}

$.fn.checkViewportAndSetClass = function() {
  $(this).each(function(){
     if (isElementInViewport(this)) {
      $(this).addClass("swoosh");
    } 
  });
 };
$('.column').checkViewportAndSetClass();

 $(window).on("scroll", function() {
    $('.column').checkViewportAndSetClass();
});

Answer 1

您的页面上没有包含jQuery。在控制台中：'未捕获的ReferenceError：$未定义'。您可以通过将以下内容添加到<head>：

来链接到google cdn副本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Answer 2

您没有在实际页面中加载jquery库。此外，您应该将代码包装在

中

$(document).ready(function() {

})

.addClass（）不在JS Fiddle之外工作

2 个答案: