Ruby on Rails || Jquery和JavaScript庫不起作用

Question

我在Codepen上創建了一個頁面，稍后將其添加到我的Ruby on Rails應用程序（ https://codepen.io/salman15/pen/evQVLV ） ，其中所有代碼都可以正常工作。

創建頁面后，我嘗試將頁面添加到我的Ruby on Rails應用程序中，使用spree （在Cloud 9上運行https://consulegem-salman15.c9users.io/ “服務器在您閱讀本文時可能不會脫機” ） 。 我是用以下方式完成的：

第1步：將html代碼添加到index.html.erb

第2步：將CSS CDN添加到_head.html.erb

第3步：下載所有JavaScript庫並將它們添加到以下文件夾路徑- > app - > assets - > javascripts - > frontend - > store

第4步：將以下代碼行添加到我的all.js文件中（在frontend文件夾中）

//= 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發生，因為代碼無法識別，通常這是因為未加載庫引起的。 然而，在加載了te頁面並加載了所有庫之后，我檢查了源頁面。

TweenMax錯誤也是我的幻想，因為它是相同的庫和相同的代碼。

我已經嘗試了幾種解決方案，比如將庫代碼添加到我的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>

更新（增加請求的文件）

的application.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 %>

更新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

回答

您可以在下面的答案中找到答案，但這不是答案的唯一部分。 答案的最后一部分是在CSS中，我的身體發生了沖突，造成了部分錯誤。 因此，如果您遇到同樣的問題，請確保您的庫已加載到適當的位置（對我而言）和正確的順序。 還要確保您的CSS不會導致任何錯誤。

Answer 1

根據您粘貼的文件，庫的加載順序錯誤。 我懷疑應該將以下行移動到application.js清單的末尾，以確保僅在所有jQuery插件之后才加載它。 就像是：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

請注意， require_tree不保證加載自定義腳本的順序。 因此，如果一個腳本依賴於另一個腳本，您仍然可以最終解決這些問題。 您應該嘗試編寫獨立腳本，以便執行順序無關緊要。 如果您絕對必須編寫彼此依賴的腳本，那么您應該傾向於手動在清單中以正確的順序導入它們。

此外，您導入看起來錯誤。 您似乎已導入jQuery三次。 您應該在開發模式下將<head>標記的內容粘貼到最終呈現的頁面中，以確保它實際上正常工作。

//= require_jquery.min <-- second import!
//= require_jquery-3.2.1.min <-- third import!
//= require_jquery.easeScroll
//= require_jquery.logosDistort.min
//= require_jquery.particleground.min
//= require_jquery.jquery.scrollmagic.min

嘗試：

//= require jquery.easeScroll

當然，在將相關的寶石添加到Gemfile之后。