我正在尝试为我的 Materialize 网站加载一个自定义索引.js文件，我已经尝试了各种方法，但它仍然无法加载。下面我包括了我的索引.html.erb，index.js，application.js，application.html.erb和application.scss。
如果您需要任何清晰度或其他脚本文件，请告诉我，对我做错了什么的任何帮助都会很棒。
提前谢谢。
/* Index.js created by Roberto Capurro 2/14/2018 */
$(document).ready(function(){
$('#form').carousel();
$('#homeSearch').carousel();
});
$('.carousel.carousel-slider').carousel({fullWidth: true});
setInterval(function(){
$('#form').carousel('next');
}, 5000);/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require material_icons
*/
@import "materialize";
@import "materialize/extras/nouislider";
@import "https://fonts.googleapis.com/icon?family=MaterialIcons";<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css"></link>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Liberty Core Real Estate</title>
</head>
<!-- NavBar Drowndown Structures -->
<!-- NavBar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo"><%= image_tag("index/libcore.png", :alt => "rss feed") %>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="active"><a href="home.html">Home</a></li>
<li ><a href="buyers.html">Buyers</a></li>
<li ><a href="buyers.html">Sellers</a></li>
<li ><a href="buyers.html">Home Search</a></li>
<li ><a href="buyers.html">Agents</a></li>
<li ><a href="buyers.html">Contact Us</a></li>
<li ><a href="buyers.html">My Account</a></li>
</ul>
</div>
</nav>
</div>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/index.js"></script>
<!-- Home Page Search Container -->
<div class="carousel carousel-slider" id="form">
<a class="carousel-item"><img src="css/Assets/DTOmaha.jpg"></a>
<div class="carousel-fixed-item center">
<div class="row1 search1">
<form class="col s12">
<div class="row">
<div class="input-field col s3">
<input id="min_price" type="text" class="validate">
<label for="min_price">Min Price</label>
</div>
<div class="input-field col s3">
<input id="max_price" type="text" class="validate">
<label for="max_price">Max Price</label>
</div>
<div class="input-field col s3">
<input id="min_bed" type="text" class="validate">
<label for="min_bed">Min Bedrooms</label>
</div>
<div class="input-field col s3">
<input id="min_bath" type="text" class="validate">
<label for="min_bath">Min Baths</label>
</div>
<div>
<!-- Search Button -->
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/2"></a>
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/3"></a>
<a class="carousel-item"><img src="https://lorempixel.com/800/400/food/4"></a>
</div>
<div class ="row2" id="row2">
<h2 id="row2title">Featured Listings</h2>
</div>
<div class="row3">
<div class="carousel" id="homeSearch">
<div class="carousel-item">
<div class="card sticky-action">
<div class="card-image " >
<img src="https://images.pexels.com/photos/218724/pexels-photo-218724.jpeg?h=350&auto=compress&cs=tinysrgb"
> </img>
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons" >navigate_next</i></a>
</div>
<div class="card-content">
<p>I am a very simple card.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/160933/girl-rabbit-friendship-love-160933.jpeg?h=350&auto=compress&cs=tinysrgb">
<span class="card-title">
This is a Title
</span>
</div>
<span class="card-content">
This is a content
</span>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/160699/girl-dandelion-yellow-flowers-160699.jpeg?h=350&auto=compress&cs=tinysrgb">
<span class="card-title">
This is a Title
</span>
</div>
<span class="card-content">
This is a content
</span>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/573299/pexels-photo-573299.jpeg?h=350&auto=compress&cs=tinysrgb">
<span class="card-title">
This is a Title
</span>
</div>
<span class="card-content">
This is a content
</span>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<p class="grey-text text-lighten-4">
Liberty Core Real Estate
14301 FNB Parkway Ste. 100
Omaha, NE 68154
<i class="material-icons" id="footer-email">email</i>
<a class="waves-effect waves-light btn-floating social facebook">
<i class="fa fa-facebook"></i> Sign in with facebook</a>
</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© Liberty Core Real Estate. All rights reserved 2018.
</div>
</div>
</footer>
</html><!-- Application.html.erb -->
<!DOCTYPE html>
<html>
<head>
<title>LibertyCore</title>
<%= csrf_meta_tags %>
<link href="https://fonts.googleapis.com/icon?family=MaterialIcons" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>//Application JS
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require jquery_ujs
//= require materialize-sprockets
//= require materialize/extras/nouislider
//= require index.js你的application.scss和layouts/application.html.erb都很好。
我会将您的自定义 JS 代码放入application.js中，并以不同的方式组织需求，jquery在rails-ujs后立即触发，然后像这样materialize：
//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .
$(document).ready(function(){
$('#form').carousel();
$('#homeSearch').carousel();
});
$('.carousel.carousel-slider').carousel({fullWidth: true});
setInterval(function(){
$('#form').carousel('next');
}, 5000);