8
我在Codepen上创建了一个页面，稍后将其添加到我的Ruby on Rails应用程序（https://codepen.io/salman15/pen/evQVLV），其中所有代码均正常工作。Ruby on Rails || Jquery和JavaScript库不工作
创建页面我尝试添加的网页对我的Ruby on Rails应用程序与狂欢后（这是对云9 https://consulegem-salman15.c9users.io/运行“服务器可能无法在离线你读到这篇文章时是”）。
第1步：我在下面的方式做到了这一点增加了HTML代码到index.html.erb
第2步：添加了CSS CDN到_head.html.erb
第3步：下载所有的JavaScript库并加入它们在以下文件夹路径- >应用程序 - >资产 - > Javascript角 - >前端 - >商店
步骤4：加入下面的代码行到我all.js文件（内侧前端夹）
//= require_tree
在这一点上我的代码应该一直工作，但它没有。
Uncaught TypeError: $(...).easeScroll is not a function
at script.self-a9cf77dbbd3e521fbb44b192f7d525c508a4a35eee8e827785ebb4ce329092f5.js?body=1:341
Uncaught TypeError: $(...).logosDistort is not a function
at HTMLDocument.<anonymous> (script.self-a9cf77dbbd3e521fbb44b192f7d525c508a4a35eee8e827785ebb4ce329092f5.js?body=1:220)
at j (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
at Object.fireWith [as resolveWith] (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
at Function.ready (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
at HTMLDocument.I (jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1:3)
13:10:27:369 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-6
13:10:27:373 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-6
13:10:27:373 (ScrollScene) -> ERROR: Invalid value for option "triggerHook": .charger
13:10:27:374 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-7
13:10:27:375 (ScrollScene) -> ERROR: Element defined in option "triggerElement" was not found: #section-7
它的错误我是完全相同的库完全相同的代码似乎并没有对我的工作的Ruby on Rails的应用程序，它幻影的我，为什么？
出现错误is not a function是因为代码无法识别，通常这是由于库未加载而引起的。然而，我在加载了页面并且加载了所有库之后检查了源页面。
TweenMax错误也phantom的我，因为它是相同的库和相同的代码。
我已经尝试了几种解决方案，比如将库代码添加到我的script.js中，它似乎可以正常工作，但这将是一个不正确的解决方案。
我想我都需要信息和代码，但是如果你需要更多的话可以随时问。
总结我的问题：
问题：好像我的Jquery库不工作
问题：为什么呢？
的script.js
//MENU
var wrap = $("#main-nav-bar");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
//MENU END
//TWEENMAX
/* triggerHook: "onEnter" "onLeave" "onCenter"; */
var controller = new ScrollMagic();
// Section 6
new ScrollScene({
triggerElement: "#section-6",
duration: 300,
triggerHook: 0.2
})
.setTween(TweenMax.to(".charging", 1, { opacity: "1" }))
.addTo(controller);
new ScrollScene({
triggerElement: "#section-6",
duration: 600,
triggerHook: ".charger"
})
.setTween(TweenMax.to(".charger", 1, { top: "766px" }))
.addTo(controller);
new ScrollScene({
triggerElement: "#section-7",
duration: 200,
triggerHook: 0.7
})
.setTween(TweenMax.to(".red-light", 1, { opacity: "1" }))
.addTo(controller);
new ScrollScene({
triggerElement: "#section-7",
duration: 400,
triggerHook: 0.5
})
.setTween(TweenMax.to(".front-phone", 1, { opacity: "1" }))
.addTo(controller);
//TWEENMAX END
//PARALLAX
(function() {
var parallax = document.querySelectorAll(".parallax"), speed = 0.3;
window.onscroll = function() {
[].slice.call(parallax).forEach(function(el, i) {
var windowYOffset = window.pageYOffset,
elBackgrounPos = "0 " + windowYOffset * speed + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
// END PARALLAX
//Scrolling
$(document).ready(function() {
//$("body").smoothWheel();
});
(function($) {
var self = this,
container,
running = false,
currentY = 0,
targetY = 0,
oldY = 0,
maxScrollTop = 0,
minScrollTop,
direction,
onRenderCallback = null,
fricton = 0.96, // higher value for slower deceleration
vy = 0,
stepAmt = 1,
minMovement = 0.1,
ts = 0.1;
var updateScrollTarget = function(amt) {
targetY += amt;
vy += (targetY - oldY) * stepAmt;
oldY = targetY;
};
var render = function() {
if (vy < -minMovement || vy > minMovement) {
currentY = currentY + vy;
if (currentY > maxScrollTop) {
currentY = vy = 0;
} else if (currentY < minScrollTop) {
vy = 0;
currentY = minScrollTop;
}
container.scrollTop(-currentY);
vy *= fricton;
// vy += ts * (currentY-targetY);
// scrollTopTweened += settings.tweenSpeed * (scrollTop - scrollTopTweened);
// currentY += ts * (targetY - currentY);
if (onRenderCallback) {
onRenderCallback();
}
}
};
var animateLoop = function() {
if (!running) return;
requestAnimFrame(animateLoop);
render();
//log("45","animateLoop","animateLoop", "",stop);
};
var onWheel = function(e) {
e.preventDefault();
var evt = e.originalEvent;
var delta = evt.detail ? evt.detail * -1 : evt.wheelDelta/40;
var dir = delta < 0 ? -1 : 1;
if (dir != direction) {
vy = 0;
direction = dir;
}
updateScrollTarget(delta);
};
window.requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
}
);
})();
/*
* http://jsbin.com/iqafek/2/edit
*/
var normalizeWheelDelta = (function() {
// Keep a distribution of observed values, and scale by the
// 33rd percentile.
var distribution = [], done = null, scale = 30;
return function(n) {
// Zeroes don't count.
if (n == 0) return n;
// After 500 samples, we stop sampling and keep current factor.
if (done != null) return n * done;
var abs = Math.abs(n);
// Insert value (sorted in ascending order).
outer: do {
// Just used for break goto
for (var i = 0; i < distribution.length; ++i) {
if (abs <= distribution[i]) {
distribution.splice(i, 0, abs);
break outer;
}
}
distribution.push(abs);
} while (false);
// Factor is scale divided by 33rd percentile.
var factor = scale/distribution[Math.floor(distribution.length/3)];
if (distribution.length == 500) done = factor;
return n * factor;
};
})();
//END SCROLLING
//MOVING PHONE
$.fn.smoothWheel = function() {
// var args = [].splice.call(arguments, 0);
var options = jQuery.extend({}, arguments[0]);
return this.each(function(index, elm) {
if (!("ontouchstart" in window)) {
container = $(this);
container.bind("mousewheel", onWheel);
container.bind("DOMMouseScroll", onWheel);
currentY = targetY = 0;
minScrollTop =
container.get(0).clientHeight - container.get(0).scrollHeight;
if (options.onRender) {
onRenderCallback = options.onRender;
}
if (options.remove) {
log("122", "smoothWheel", "remove", "");
running = false;
container.unbind("mousewheel", onWheel);
container.unbind("DOMMouseScroll", onWheel);
} else if (!running) {
running = true;
animateLoop();
}
}
});
};
//END MOVING PHONE
})(jQuery);
//fade in
var $animation_elements = $(".animation-element");
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = window_top_position + window_height;
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = element_top_position + element_height;
//check to see if this current container is within viewport
if (
element_bottom_position >= window_top_position &&
element_top_position <= window_bottom_position
) {
$element.addClass("in-view");
} else {
$element.removeClass("in-view");
}
});
}
$window.on("scroll resize", check_if_in_view);
$window.trigger("scroll");
var particles = true,
particleDensity,
options = {
effectWeight: 1,
outerBuffer: 1.08,
elementDepth: 220
};
$(document).ready(function() {
$(".section-0").logosDistort(options);
if (particles) {
particleDensity = window.outerWidth * 7.5;
if (particleDensity < 13000) {
particleDensity = 13000;
} else if (particleDensity > 20000) {
particleDensity = 20000;
}
return $("#particle-target").particleground({
dotColor: "#1ec5ee",
lineColor: "#0a4e90",
density: particleDensity.toFixed(0),
parallax: false
});
}
});
$(document).ready(function() {
/**
* This part does the "fixed navigation after scroll" functionality
* We use the jQuery function scroll() to recalculate our variables as the
* page is scrolled/
*/
$(window).scroll(function() {
var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
var div_top = $("#nav-anchor").offset().top;
if (window_top > div_top) {
$("nav").addClass("stick");
} else {
$("nav").removeClass("stick");
}
});
/**
* This part causes smooth scrolling using scrollto.js
* We target all a tags inside the nav, and apply the scrollto.js to it.
*/
$("nav a").click(function(evn) {
evn.preventDefault();
$("html,body").scrollTo(this.hash, this.hash);
});
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i = 0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr("href");
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function() {
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i = 0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < divPos + divHeight) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
if (windowPos + windowHeight == docHeight) {
if (!$("nav li:last-child a").hasClass("nav-active")) {
var navActiveCurrent = $(".nav-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
$("nav li:last-child a").addClass("nav-active");
}
}
});
});
//smooth anchors
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
//end smooth anchors
index.html.erb
<div id="sidebar">
<div id="nav-anchor"></div>
<nav>
<ul>
<li>
<a href="#section-1">
<div class="ball"></div><span id="link">Top</span></a>
</li>
<li>
<a href="#section-2">
<div class="ball"></div><span id="link">Design</span></a>
</li>
<li>
<a href="#section-4">
<div class="ball"></div><span id="link">Vermogen</span></a>
</li>
<li>
<a href="#section-7">
<div class="ball"></div><span id="link">Iris scanner</span></a>
</li>
<li>
<a href="#section-8">
<div class="ball"></div><span id="link">Fingerprint Scanner</span></a>
</li>
<li>
<a href="#section-5">
<div class="ball"></div><span id="link">Camera</span></a>
</li>
<li>
<a href="#section-6">
<div class="ball"></div><span id="link">Batterij</span></a>
</li>
<li>
<a href="#section-9">
<div class="ball"></div><span id="link">Software</span></a>
</li>
</ul>
</nav>
</div>
<div class="section-0">
<div class="phone-container">
<div class="phone-front" id="layer-one"></div>
</div>
</div>
<section class="section-1 parallax parallax-1" id="section-1">
<div class="container" id="section-1">
<div class="text-block animation-element">
<h1>De toekomst is nu</h1>
<p>"De Volks Phone is een geweldig hi-end toestel voor een betaalbare prijs."<br> — "Telegraaf"</p><br>
<div class="pre-order-button">
<a href="#section-9"> Pre-order</a>
</div>
</div>
</div>
</section>
<section class="section-2" id="section-2">
<div class="container">
<div class="left-half" id="left-half-home">
<div class="text-block animation-element">
<h1>“De perfecte balans tussen staal en glaswerk”</h1>
</div>
</div>
<div class="right-half" id="right-half-home">
<div class="rear-phone animation-element bounce-up">
</div>
</div>
</div>
</section>
<section class="section-3 parallax parallax-2" id="section-3">
<div class="container">
<h1>Ons Volk</h1>
</div>
</section>
<section class="section-4" id="section-4">
<div class="container">
<div class="top-part" id="left-half-home">
<div class="text-block animation-element">
<h1>Beter. Sneller. Uniek.</h1>
</div>
</div>
<div class="middle-part" id="right-half-home">
<div class="rear-phone animation-element slide-right">
</div>
</div>
<div class="bottom-part">
<div class="text-block ">
<ul>
<li class="spec-left">
<h1>6GB</h1>
<img src="http://sterntelecom.com/img/phones/ram-memory.png">
<h4>RAM</h4></li>
<li class="spec-center">
<h1> 4.2 Mghz </h1>
<img src="http://sterntelecom.com/img/phones/cpu.png">
<h4>Deca core CPU</h4></li>
<li class="spec-right">
<h1>64GB</h1>
<<img src="http://sterntelecom.com/img/phones/hard-drive.png">
<h4>Opslag</h4></li>
<li class="spec-right">
<h1>5.5 Inch</h1>
<img src="http://sterntelecom.com/img/phones/inch.png">-
<h4>Scherm</h4></li>
</ul>
</div>
</div>
</div>
</section>
<section class="section-7" id="section-7">
<div class="container">
<div class="intro-text">
<h1>Wat science fiction was in nu werkelijkheid.</h1>
<h2>Maak kennis met de ultra-moderne functie van uw Volks Phone: De irisscanner</h2>
</div>
<div class="red-light"></div>
<div class="front-phone left-half" id="left-half-home">
<div class="screen" id="screen-section-7">
</div>
</div>
<div class="right-half" id="right-half-home">
<div class=" animation-element ">
<div class="text-block animation-element ">
<h1>Veilig</h1>
<p>Elk iris vertoont een uniek patroon. Met de irisscanner bent u verzekerd van veiligheid.</p>
</div>
<div class="text-block animation-element ">
<h1>Ook in het donker</h1>
<p>Met de infrarood iris scanner herkent de Volks Phone uw irissen ook in het donker.</p>
</div>
<!--<div class="text-block animation-element ">
<h1>High-end telefoon voor een Low prijs</h1>
<p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
</div>-->
</div>
</div>
</div>
</section>
<section class="section-8" id="section-8">
<div class="container">
<div class="left-half" id="left-half-home">
<div class="text-block">
<h1>Fingerprint scanner</h1><br>
<p>Ontgrendel de Volks Phone binnen 0.4 seconden met met de super snelle vingerafdrukscanner</p>
</div>
</div>
<div class="right-half animation-element bounce-up" id="right-half-home">
</div>
</div>
</section>
<section class="section-5" id="section-5">
<div class="container">
<div class="top-part" id="left-half-home">
<div class="text-block">
<h1>Haarscherpe foto's</h1><br>
<p>16-mp back-camera, 13-mp front-camera.</p>
</div>
</div>
<div class="middle-part" id="right-half-home">
</div>
<div class="bottom-part">
<div class="text-block animation-element bounce-up">
</div>
</div>
</div>
</section>
<section class="section-6" id="section-6">
<div class="container">
<div class="front-phone left-half" id="left-half-home">
<div class="screen">
<div class="animation-element charging" id="charging">
<h1>Fast Charging</h1>
<div class="animation-element battery"></div>
</div>
</div>
</div>
<div class="charger">
</div>
<div class="right-half" id="right-half-home">
<div class=" animation-element bounce-up">
<div class="text-block animation-element">
<h1>Groot</h1>
<p>Met een capaciteit van 3250Mah biedt Volks u een bovengemiddeld batterij vermogen.</p>
</div>
<div class="text-block animation-element">
<h1>Snel</h1>
<p>Via de fast-charging functie is de Volks Phone binnen 45minuten volledig opgeladen
</p>
</div>
<div class="text-block animation-element">
<h1>Zuinig</h1>
<p>De Deca-core processor zorgt ervoor dat het toestel alleen op volle energie presteert wanneer dat nodig is.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-9" id="section-9">
<div class="container">
<div class="top-part" id="left-half-home">
<div class="text-block animation-element">
<h1>Simpliciteit op z'n fijnst</h1>
<p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
<div class="pre-order-button">
<a href=""> Pre-order</a>
</div>
</div>
</div>
<div class="middle-part" id="right-half-home">
<div class="screens">
</div>
</div>
</div>
<div class="arrow-up">
<a href="#section-1"><img src="http://sterntelecom.com/img/phones/arrowhead.png"></a>
</div>
</section>
UPDATE（ADDED请求的文件）
应用。JS
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree
//= require_jquery.min
//= require_jquery-3.2.1.min
//= require_jquery.easeScroll
//= require_jquery.logosDistort.min
//= require_jquery.particleground.min
//= require_jquery.jquery.scrollmagic.min
//= require 'greensock/TweenLite'
//= require 'greensock/easing/EasePack'
//= require 'greensock/jquery.gsap.js'
_head.html.erb
<meta charset="utf-8">
<title>Volks - Het volk's toestel</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://www.jqueryscript.net/demo/jQuery-Plugin-For-3D-Perspective-Transforms-On-Mousemove-LogosDistort/assets/css/perspectiveRules.css'>
<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'volks-logo.png' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'spree/frontend/all' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= yield :head %>
UPDATE 2（改变了的application.js文件）
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_jquery.min
//= require_jquery-3.2.1.min
//= require_jquery.easeScroll
//= require_jquery.logosDistort.min
//= require_jquery.particleground.min
//= require_jquery.jquery.scrollmagic.min
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero
ANSWER
你可以在下面的答案中找到答案，但它不是答案的唯一部分。答案的最后一部分是在CSS中，我的身体发生了冲突，导致部分错误。所以，如果你遇到同样的问题，确保你的库被装载在正确的位置（底部）和正确的顺序。还要确保你的CSS不会导致任何错误。
这很可能是资产管道正在加载脚本的顺序的问题。你可以在开发模式下发布你的'
'标签的内容，以及你的'application.js'清单文件吗？ – Prajjwal同意@Prajjwal [指南]（http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives）说：“require_tree包含文件的顺序是未指定的，你不应该依赖如果您需要确保某些特定的JavaScript在连接文件中的某个其他位置上方结束，请在清单中首先要求先决条件文件。“所以它很可能是文件订单问题 –
这就是为什么您应该向我们展示您在开发模式下的'
'标签的内容。管道在开发过程中为每个资产单独服务，因此应该使订购问题明显。 – Prajjwal