我是jquery / web design的新手并下载模板以尝试熟悉自己。我遇到了某个阻止我的jQuery加载的脚本的问题。我在我网站的标题中有这个:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>
<script type="text/javascript" src="layout/scripts/responsiveslides.js-v1.53/responsiveslides.min.js"></script>
<script src="layout/scripts/custom.js"></script>
罪魁祸首文件是<script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>
;每次我禁用此行jQuery工作正常。我真的不确定在文件中识别什么会导致jQuery无法加载。 js的内容:
jQuery.noConflict()(function ($) {
// Create the dropdown base
$("<form id='mobilemenu'><select /></form>").appendTo("#topnav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value": "",
"text": "Click For Menu"
}).appendTo("#topnav select");
//Populate dropdown with menu items
$("#topnav a").each(function () {
var el = $(this);
var prefix = '';
switch (el.parents().length) {
case (6):
prefix = '';
break;
case (8):
prefix = '- - - ';
break;
case (10):
prefix = '- - - - - ';
break;
case (12):
prefix = '- - - - - - - ';
break;
default:
prefix = '';
break;
}
$("<option />", {
"value": el.attr("href"),
"text": prefix + el.text()
}).appendTo("#topnav select");
$("#topnav select").change(function () {
window.location = $(this).find("option:selected").val();
});
});
});
有人能够通过更正此文件指出我正确的方向吗?我试图移动我的脚本加载的顺序,并且顺序无关紧要,当包含mobilemenu脚本时,jQuery不会加载。
答案 0 :(得分:1)
在您提及的脚本中,您将看到调用noConflict()
此方法允许jQuery与其他库一起使用,这些库也依赖于$
作为入口点删除{ {1}}作为jQuery的别名。
在$
调用之后,您会立即看到一个非常具体的函数签名传递给jQuery:
noConflict()
jQuery将调用此函数,当它执行时它将作为(function ($) {
//function code here
});
参数传递给自己,并且在该函数的范围内,您现在再次使用$
访问jQuery。
因此,使用脚本的方式就需要按名称使用jQuery。
有关详细信息,请查看$
上的documentation。
关于noConflict
还有其他几个问题,this one可能会有所帮助。