javascript - 我有两个不能一起工作的 javascript 文件

标签 javascript jquery

我已经查看了这个问题的许多其他答案,但找不到适合我的情况的答案。我想使用两个 .js 文件,但只有其中一个有效。我认为一定存在某种冲突,但我不知道它是什么。

这是我的头部部分。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="bower_components/FlowType.js/flowtype.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="main.css" rel="stylesheet">
</head>

然后我在结束正文标记之前调用这些脚本。

<script type="text/javascript">
    $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("body").flowtype({
            minimum: 300,
            minFont: 12,
            maxFont: 40,
            fontRatio: 30
        });
        $j("nav").flowtype({
            minFont:8,
            maxFont: 14,
            fontRatio: 23
        });
        $j(".jumbotron").flowtype({
            fontRatio:100
        });
        $j(".established h5").flowtype({
            minFont: 16,
            maxFont: 45,
            fontRatio: 16
        });
        $j("h1").flowtype({
            minFont: 16,
            maxFont: 45,
            fontRatio: 12
        });
        $j("h2").flowtype({
            minFont:16,
            maxFont:40,
            fontRatio:15
        });
        $j("h3").flowtype({
            minFont:12,
            maxFont:35,
            fontRatio:20
        });
        $j("h4").flowtype({
            minFont:12,
            maxFont:35,
            fontRatio:20
        });
        $j("h5").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:20
        });
        $j("h6").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:20
        });
        $j("p").flowtype({
            minFont: 8,
            maxFont: 14,
            fontRatio: 20
        });
        $j(".overview").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
         $j(".slideshow").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".slide img").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".slider-nav").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".info").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
        $j(".copyright").flowtype({
            minFont:12,
            maxFont:20,
            fontRatio:30
        });
    });
</script>
<script type="text/javascript" src="app.js"></script>
</body>

flowtype.js 文件如下所示:

(function($){
       $.fn.flowtype = function(options) {
         .....................
         .....................
       };
 } (jQuery));

app.js 文件如下所示:

var main = function(){
        ..............................
        ................................
        ..............................
}
$(document).ready(main);

我想我已经解决了一些人遇到的 jQuery.noConflict() 问题。我只使用一个 jquery 文件。那么我做错了什么?希望这是我没有发现的愚蠢的事情。

感谢所有帮助!

最佳答案

So what am I doing wrong?

您正在使用jQuery.noConflict()。它未定义 $,因此 $(document).ready(main); 将不起作用。

关于javascript - 我有两个不能一起工作的 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31165882/

相关文章:

PHP 和 jQuery ajax 调用无需等待响应

javascript - 在 SugarCrm 7.2 中完全加载记录 View 后执行 javascript

javascript - 导入的 sass 文件出现 grunt "undefined variable"错误

javascript - Bootstrap 模态形式,Div 不包含形式

javascript - Ember.js anchor 链接

javascript - 什么是AJAX,它如何工作?

javascript - jQuery 查找 id 然后执行操作

javascript - 如何启用和禁用页面滚动

javascript - 防止按钮点击激活 <tr> onclick 事件

javascript - 如何使用 Javascript 检测区域的宽度并应用正确的菜单间距