我当前正在开发的网站的代码(发布在下面)目前无法运行。当它全部包含在index.html文件中时(意味着我的所有代码，其他库/插件都被正确引用并当然存储在其他地方)，一切都完美运行。不过，我正在尝试更改网站的结构，以使用 JQuery 的加载功能运行，这样当有人单击链接时，我可以将 #content-display div 交换为不同的信息，从而允许我添加 JQuery 动画以获得无缝体验.
可能有一种更简单的方法来实现这种效果，但我现在想了解加载函数出了什么问题，以便我可以在将来的元素中有效地使用它。
我在下面添加了所有相关代码。我想让幻灯片再次运行，然后我应该能够自己修复其他功能。幻灯片使用插件MaxImage2。
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(位于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(与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>
再次重申，在我尝试将代码分离到不同的对象并从 js 文件中调用 .load 函数之前，我没有遇到任何问题，所以我假设问题出在我的路径或中我用来调用函数的语法，但我一直在尝试我能想到的一切，但现在我已经无计可施了。非常感谢您的帮助。
最佳答案
您不能拥有 <script>带有 .src 的标签标签之间的属性和脚本。您必须使用两个单独的 <script>标签。
更改此:
<script src="js/modules/jfunc.js">
(function(){
Main.init();
Main.bindUI();
}());
</script>
对此:
<script src="js/modules/jfunc.js"></script>
<script>
(function(){
Main.init();
Main.bindUI();
}());
</script>
附注IIFE 似乎也没有理由。您只是进行了两个函数调用。没有理由围绕它包装另一个函数。
关于javascript - 如何在这个js文件中使用Jquery的load函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32708949/