Rails 应用程序元素在 classie.js 中为空答案

【问题标题】：Rails Application elem is null in classie.jsRails 应用程序元素在 classie.js 中为空
【发布时间】：2014-09-17 07:29:08
【问题描述】：

在我的 Rails 应用程序中，我的折叠导航栏在滚动时没有改变它的样式，并且在检查元素控制台中也出现错误：

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 库的顺序，但没有帮助。

//= 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

【问题讨论】：

标签： javascript jquery css ruby-on-rails

【解决方案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');
        }
    });
});

这可能无法直接回答您的问题，但目前确实解决了问题。

【讨论】：

【解决方案2】：

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

希望这会有所帮助！

【讨论】：

【解决方案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中。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

打开 “视图 > 布局 > application.html.erb” 现在移动这个代码<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 在<%= yield %> 之后和</body> 之前它保证 DOM 元素在 JavaScript 运行之前加载到页面上。

【讨论】：