Question

在我的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

Answer 1

我还必须整合代理主题，并且也遇到了这个错误。由于某种原因，使用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');
        }
    });
});

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

Answer 2

当我使用缩小的JS时遇到同样的问题，所以只使用普通的JS（删除缩小的JS）就解决了我的问题。

希望这会有所帮助!!

Answer 3

这样做之后：

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

排队脚本（）

 http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

在function.php中。

Answer 4

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

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

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

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

Answer 5

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

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

5 个答案: