如何在此js文件中使用Jquery的加载功能？

Question

The code for the website I'm currently working on (posted below) is currently not functional. 我当前正在工作的网站的代码（在下面发布）目前无法正常运行。 When it was all contained in only the index.html file (meaning all of my code, other libraries / plugins were referenced correctly and stored elsewhere of course), everything worked perfectly. 当所有内容仅包含在index.html文件中时（意味着我的所有代码，其他库/插件都被正确引用并存储在其他位置），则一切工作正常。 I'm trying to change the structure of the site to function using JQuery's load function, however, so I can swap the #content-display div out for different information when someone clicks a link, allowing me to add JQuery animations for a seamless experience. 但是，我正在尝试更改网站的结构以使用JQuery的load函数运行，因此当有人单击链接时，我可以将＃content-display div换出其他信息，以允许我添加JQuery动画以获得无缝体验。

There may be an easier way to accomplish this effect, but I'd like to learn what's going wrong with the load function now so that I can use it effectively for projects in the future. 可能有一种更简单的方法来实现此效果，但是我想了解一下load函数现在出了什么问题，以便将来可以有效地将其用于项目中。

I'm including all of the relevant code below. 我包括以下所有相关代码。 I'd like to get the slideshow operational again and then from there I should be able to fix the other functions myself. 我想让幻灯片再次运行，然后从那里我应该可以自己修复其他功能。 The slideshow uses the plugin MaxImage2. 幻灯片使用插件MaxImage2。

index.html: index.html的：

<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Personal Portfolio of Christopher Willingham" name=
"description">
<meta content="" name="author">

<title>CWPhotography</title>
<link href="img/icons/favicon.ico" rel="icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:Light' rel='stylesheet' type='text/css'>
<link charset="utf-8" href="css/jquery.maximage.css?v=1.2" media="screen"rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
</head>

<body>
<nav class="navbar-fixed-top">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-5 col-md-offset-1">
                <a href="#" id="link-slideshow">christopher willingham photography</a>
            </div>

            <ul class="col-md-5 alignright" id="navlist">
                <li>
                    <a id="link-portfolio">portfolio</a>
                </li>

                <li>
                    <a id="link-about">about</a>
                </li>

                <li>
                    <a id="link-contact">contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid" id="content-display"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script charset="utf-8" src="js/lib/jquery.cycle.all.js" type="text/javascript"></script> 
<script charset="utf-8" src="js/lib/jquery.maximage.js" type="text/javascript"></script> 
<script src="js/lib/bootstrap.min.js"></script>

<script src="js/modules/jfunc.js">
    (function(){
            Main.init();
            Main.bindUI();
        }());
</script>

</body>
</html>

jfunc.js (located under js/modules/jfunc, relative to the index): jfunc.js（相对于索引位于js / modules / jfunc下）：

var Main = {

init: function() {

    $('#content-display').load("slideshow.html");


    $('#maximage').maximage({
        cycleOptions: {
            fx: 'fade',
            speed: 800,
            timeout: 7200,
        },
        onFirstImageLoaded: function() {
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });

},

bindUI: function() {

    $('#link-portfolio').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'portfolio.html',
            success: function() {
                $.get('portfolio.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });

    $('#link-about').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'about.html',
            success: function() {
                $.get('about.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });

    $('#link-contact').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'contact.html',
            success: function() {
                $.get('contact.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });

    $('#link-slideshow').click(function() {
        $('#content-display').fadeOut('fast');
        $('#content-display').empty();
        $.ajax({
            url: 'slideshow.html',
            success: function() {
                $.get('slideshow.html', function(page) {
                    $('#content-display').html(page);
                });
            }
        });
        $('#content-display').fadeIn('fast');
    });
}

};

slideshow.html (stored in the same folder as index.html): slideshow.html（与index.html存储在同一文件夹中）：

<html lang="en">

<div id="maximage" class="mc-cycle transitDiv" >
    <div class="first-item">
        <img src="img/slideshow/slide1.jpg" alt="" width="2048" height="1152" />
    </div>
    <img src="img/slideshow/slide2.jpg" alt="" width="2048" height="1152" />
    <img src="img/slideshow/slide3.jpg" alt="" width="2048" height="1152" />
    <img src="img/slideshow/slide4.jpg" alt="" width="2048" height="1152" />
</div>

</html>

Once again, just to reiterate, I wasn't having any issues until I tried separating the code into different objects and calling the .load function from the js file, so I'm assuming the issue is with my pathing or in the syntax I use to call the functions, but I've been trying everything I can think of and I'm at wit's end now. 再次重申一下，直到尝试将代码分成不同的对象并从js文件调用.load函数之前，我都没有遇到任何问题，所以我假设问题出在我的路径或语法上用来调用函数，但是我一直在尝试我能想到的所有事情，而我现在机智了。 Your help is truly appreciated. 非常感谢您的帮助。

Answer 1

You cannot have a <script> tag with both a .src property and script between the tags. 您不能同时在<script>标签和标签之间同时包含.src属性和脚本。 You must use two separate <script> tags for that. 您必须为此使用两个单独的<script>标记。

Change this: 更改此：

<script src="js/modules/jfunc.js">
    (function(){
            Main.init();
            Main.bindUI();
        }());
</script>

to this: 对此：

<script src="js/modules/jfunc.js"></script>
<script>
    (function(){
            Main.init();
            Main.bindUI();
        }());
</script>

PS there appears to be no reason for the IIFE either. PS似乎也没有理由使用IIFE。 You're just making two function calls. 您只是在进行两个函数调用。 No reason to wrap another function around that. 没有理由围绕它包装另一个功能。

如何在此js文件中使用Jquery的加载功能？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-22 05:35:00

如何在此js文件中使用Jquery的加载功能？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-22 05:35:00

解决方案1
0 已采纳 2015-09-22 05:35:00