Javascript 如何使用Jquery'；这个js文件中的加载函数是什么？_Javascript_Jquery_Html_Css_Ajax

Javascript 如何使用Jquery'；这个js文件中的加载函数是什么？

javascript jquery html css ajax

Javascript 如何使用Jquery'；这个js文件中的加载函数是什么？,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我目前正在使用的网站代码（发布在下面）目前不起作用。当它只包含在index.html文件中时（这意味着我所有的代码、其他库/插件都被正确引用并存储在其他地方），一切都运行得很好。不过，我正试图使用JQuery的加载功能来改变网站的结构，这样当有人单击链接时，我就可以将#content display div换成不同的信息，从而可以添加JQuery动画以获得无缝体验可能有一种更简单的方法来实现这种效果，但我现在想了解load函数到底出了什么问题，这样我就可以在将来的项目中有效地使用它我在下面列

我目前正在使用的网站代码（发布在下面）目前不起作用。当它只包含在index.html文件中时（这意味着我所有的代码、其他库/插件都被正确引用并存储在其他地方），一切都运行得很好。不过，我正试图使用JQuery的加载功能来改变网站的结构，这样当有人单击链接时，我就可以将#content display div换成不同的信息，从而可以添加JQuery动画以获得无缝体验

可能有一种更简单的方法来实现这种效果，但我现在想了解load函数到底出了什么问题，这样我就可以在将来的项目中有效地使用它

我在下面列出了所有相关代码。我想让幻灯片再次运行，然后从那里我应该能够修复自己的其他功能。幻灯片使用插件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>

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

slideshow.html（与index.html存储在同一文件夹中）：

再一次重申，在我尝试将代码分成不同的对象并从js文件调用.load函数之前，我没有遇到任何问题，因此我假设问题在于我的路径或调用函数的语法，但我一直在尝试我能想到的一切，现在我束手无策。非常感谢您的帮助。

您的

标记不能同时包含

.src

属性和脚本。为此，必须使用两个单独的

标记

更改此项：

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


（功能（）{
Main.init（）；
Main.bindUI（）；
}());

为此：

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


（功能（）{
Main.init（）；
Main.bindUI（）；
}());

顺便说一句，似乎也没有理由活下去。您只需要进行两个函数调用。没有理由围绕它包装另一个函数。

标记之间不能同时包含

.src

属性和脚本。为此，必须使用两个单独的

标记

更改此项：

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


（功能（）{
Main.init（）；
Main.bindUI（）；
}());

为此：

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


（功能（）{
Main.init（）；
Main.bindUI（）；
}());

顺便说一句，似乎也没有理由活下去。您只需要进行两个函数调用。没有理由在这一点上包装另一个函数。

为什么要调用

$。在$内获取。ajax
成功回调？您可以直接使用$.get
：）尝试
，然后使用function（）{Main.init（）；Main.bindUI（）；}（））
从slideshow.html中删除
和
。当我试图这样调用脚本时，Firebug会告诉我：“SyntaxError:function语句需要一个名称”。我之所以在成功回调中使用$.get，仅仅是因为我在模仿jquery文档是如何做到这一点的，但现在我的重点是在可能的情况下使用$.load。如果我能让slideshow正常工作，我只需浏览并修改其他函数以匹配。@jfriend00我应该提到，如果我试图通过将$.load函数包含在index.html中来使用它，我可以很好地检索slideshow.html内容，所以我认为这没有任何问题。当我通过js变量调用$.load函数时，它停止工作。不管怎样，我尝试删除html标记，但没有任何改变。为什么要调用$.get
inside$.ajax
成功回调？您可以直接使用$.get
：）尝试
，然后使用function（）{Main.init（）；Main.bindUI（）；}（））
从slideshow.html中删除
和
。当我试图这样调用脚本时，Firebug会告诉我：“SyntaxError:function语句需要一个名称”。我之所以在成功回调中使用$.get，仅仅是因为我在模仿jquery文档是如何做到这一点的，但现在我的重点是在可能的情况下使用$.load。如果我能让slideshow正常工作，我只需浏览并修改其他函数以匹配。@jfriend00我应该提到，如果我试图通过将$.load函数包含在index.html中来使用它，我可以很好地检索slideshow.html内容，所以我认为这没有任何问题。当我通过js变量调用$.load函数时，它停止工作。不管怎样，我试着删除html标签，但什么也没改变。非常感谢你，伙计！这让我走得更远。当幻灯片内容（content display div）被加载而不是包含在index.html中时，MaxImage脚本似乎仍然不起作用。你知道为什么吗？我也想+1这个，但我的帐户是新的，它不允许我使用。@Alebon-这可能是一个加载顺序问题。只有在.load（）
操作完成后，才能将jQuery操作应用于幻灯片显示DOM元素。您必须将回调传递到.load（）
，并在该回调中初始化幻灯片。因此，为了确保我正确阅读了这篇文章，这就像Ajax的成功回调一样？我可以检查jquery文档以确保语法正确。非常感谢你这么解释，我仍然在学习JavaScript，但是术语从我的C++类中有意义，这对我有很大帮助。你就是今晚的男人@Alebon-是的，它的工作原理类似于Ajax调用的成功处理程序，这是因为.load（）
实际上是内部的Ajax调用。仅供参考，即使你还不能投票，你也可以通过点击答案左边的绿色复选标记来选择一个最佳答案。是的，这就是我必须开始工作的原因