.addClass(）在JS Fiddle之外不起作用

.addClass() not working outside of JS Fiddle

本文关键字：不起作用 Fiddle JS addClass      更新时间：2023-09-26

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

这个JS Fiddle将类.swoosh添加到视口中的所有.column，但当我在标记中使用相同的JS时，它不会将.swoosh类添加到视口的.column。

  1. 我检查了jquery是否正在加载，它是
  2. 该代码是有效的，因为它在JS Fiddle上工作

但由于某些原因，此页面中视口中的.column没有得到类.swoosh。

这又是JS Fiddle。

这又是实时页面。

这是我试图运行的代码：

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>

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

$(document).ready(function() {
})
相关文章：