我正在尝试向 .column 的所有实例添加一个类视口(viewport)中的类。
This JS Fiddle添加类(class) .swoosh致所有人.column在视口(viewport)中，但是当我在标记中使用完全相同的 js 时，它不会添加 .swoosh类到 .column在视口(viewport)中。
- 我检查了 jquery 是否正在加载，确实如此。
- 该代码有效，因为它适用于 JS Fiddle
但由于某种原因，.column在 this page 的视口(viewport)中没有上课.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();
});
最佳答案
您的页面上没有包含 jQuery。在控制台中:“ Uncaught ReferenceError :$未定义”。您可以通过将以下内容添加到 <head> 来链接到 google cdn 副本:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
关于javascript - .addClass() 在 JS Fiddle 之外不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17515912/