Rails应用程序elem在classie.js中为null

在我的Rails应用程序中,我的折叠navebar在滚动时不会改变它的样式,并且在inspect元素控制台中也会发生错误:

TypeError: elem is null elem.classList.add( c ); 

发生错误的Classie .js:

 ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; 

我改变了需要库的顺序,但它没有帮助。

 //= require jquery //= require jquery-1.11.0.js //= require classie.js //= require jquery_ujs //= require bootstrap.js //= require bootstrap.min.js //= require agency.js //= require contact_me.js //= require cbpAnimatedHeader.js //= require cbpAnimatedHeader.min.js //= require jqBootstrapValidation.js 

我还必须整合primefaces能机构的主题,并且也遇到了这个错误。 由于某种原因,使用document.querySelector的cbpAnimatedHeader.js文件中的头变量始终为null。 所以我将整个脚本转换为Jquery:

 $(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 300){ $('.navbar-default').addClass('navbar-shrink'); } else{ $('.navbar-default').removeClass('navbar-shrink'); } }); }); 

这可能不会直接回答你的问题,但它确实解决了现在的问题。

当我使用缩小的JS时遇到同样的问题,所以使用普通的JS(删除缩小的JS)解决了我的问题。

希望这可以帮助!!

这样做之后:

 $(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 300){ $('.navbar-default').addClass('navbar-shrink'); } else{ $('.navbar-default').removeClass('navbar-shrink'); } }); }); 

如果您使用的是从wrapbootstrap.com或其他主题和内容提供商网站购买的主题,那么您必须特别注意主题如何加载并使用其js插件。

大多数主题使用大量的javascript插件,几乎在所有情况下你都会找到一个加载并初始化所有这些插件的javascript文件。

我建议你修改主要的js文件初始化和驱动你的主题。

在我的主题 – 我从wrapbootstrap购买的活力 – vitality.js文件是主要的javascript文件,我注意到它没有使用$(document).ready()函数来初始化所有其他javascript。 据我所知,Rails需要一个document.ready函数,所以我所做的就是替换(函数($){与$(document).ready(function(){在文件的开头,并且瞧,一切都像魅力一样。 希望这可以帮助。

打开“views> layouts> application.html.erb”现在将此代码<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>移到<%= yield %>之前和之前它保证在JavaScript运行之前在页面上加载DOM元素。