Question

我正在建立一个网站。我构建了后端，现在我正在做前端。在前端我有引导程序，各种字体真棒图标和角度。还应该注意这是一个rails应用程序。

我想使用jQuery＆amp; amp;添加1页滚动功能jQuery缓动，由字体 - 令人敬畏的箭头驱动。我显然没有做正确的事情，因为在使用它时会变成蓝色（想想可能是＃34;活跃状态＆＃34;因为href？），并且将我页面上的所有字体（一切）都变成蓝色。

在Chrome控制台中，我收到错误;

Uncaught TypeError: undefined is not a function

在jQuery中指的是这一行（可能是任意的）;

this.pos = eased = jQuery.easing[ this.easing ](

以下是我的其余代码;

index.html.erb

<div class="page-scroll" id="arrow"><a href="#clients"><i class="fa fa-chevron-down"></i><a></div>

styles.css的

  #arrow {
    font-size: 25px;
    color: grey;
}

main.js

    $(function() {
      $('.page-scroll a').bind('click', function(event){
         $('html, body').animate({
             scrollTop: $("#clients").offset().top
         }, 1500);
         event.preventDefault();
     });
  });

application.html.erb（感谢另一个SO问题，jQuery和jQuery Easing放在样式表下）

<!-- Easing for Page Scroll -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

当我在索引中注释div时，所有字体都恢复正常（当它处于活动状态时它是蓝色的）。当我点击按钮时，它会将我带到我想要的元素，但它会让你失去它，它没有缓和方面（这就是为什么我要添加缓动）。

我搜索了相当数量，我对此感到困惑（尤其是文本的更改）。任何帮助将非常感激。

Answer 1

我已经弄明白是什么导致了这一点。

当发生这种情况时，即使正在调用它，您的页面也找不到jQuery。要解决此问题，请确保您的网页内容与此类似（对于rails，所有这些内容都在 application.html.erb 中）;

<强>头

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Good SEO.">
    <meta name="author" content="">

    <title>Your Title</title>

    <!-- Bootstrap Core CSS for smaller projects/single page I'll use a CDN -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- Fonts -->
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet" type='text/css'>

    <!-- CSS or in assets/stylesheets-->
    <link href="/assets/styles.css" media="screen" rel="stylesheet">

</head>

关闭身体＆amp; html标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</body>    
</html>

我注意到订单必须是jQuery，bootstrap（如果你正在使用它），然后是jquery.easing。

未捕获的TypeError：undefined不是函数（jQuery和jQuery Easing）

1 个答案: