我正在查看this site的源代码并尝试弄清楚Javascript的一部分是如何工作的,因为我想复制他们的扩展列表功能(例如“WHEN&我可以转到哪里出售门票和钱币“)进入我的网站。
源代码的第74-75行是
<script type="text/javascript" src="http://newjs.finalsite.com/150409/javascript/jQuery/jquery.min.js"></script>
<script type="text/javascript"> var $j = jQuery.noConflict(); </script>
基本上将$j
设置为函数noConflict()
返回的任何内容。
然后,在代码的底部,它们包含JS文件http://newjs.finalsite.com/150409/javascript/pages/multicontent/multi_expand.js,其中包含函数
$j(function(){
if(clickToClose){
$j('.mcExpandingList').accordion({
collapsible:'true',
autoHeight: false
});
if(!mc_viewOption1){ $j('.mcExpandingList').accordion( 'option', 'active', false ); }
}else{
$j('.mcExpandingList').addClass('ui-accordion ui-widget ui-helper-reset ui-accordion-icons');
$j('.mcExpandingList h4').addClass('ui-accordion-header ui-helper-reset ui-state-default ui-corner-all')
.prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.hover(function(){ $j(this).toggleClass('ui-state-hover') })
.click(function(){
$j(this).toggleClass('ui-state-active ui-corner-top ui-corner-all');
$j(this).next().toggle('blind');
$j(this).find('span').eq(0).toggleClass('ui-icon-triangle-1-s');
return false;
});
$j('.contentElement').addClass('ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom').css('display','none');
if (mc_viewOption1) {
$j('.mcExpandingList h4').eq(0).toggleClass('ui-state-active ui-corner-top ui-corner-all');
$j('.mcExpandingList h4').eq(0).next().show();
$j('.mcExpandingList h4').eq(0).find('span').eq(0).addClass('ui-icon-triangle-1-s');
};
}
});
正如我所理解的那样,它正在将一个匿名函数传递给返回的noConflict()
对象,这使我认为$j
本身就是一个可以执行某些操作的函数。但是我对如何将上述函数作为click
事件附加到扩展列表链接有点困惑。这里有没有人理解它,如果有的话,你能解释一下吗?
答案 0 :(得分:1)
当包含jQuery时,它会存储以前具有的任何值window.$
。
当我们调用$j = jQuery.noConflict
时,将window.$
的值返回到其先前的状态。如果您使用Prototype也使用快捷方式$
。
它还返回一个新的别名,以便我们可以通过$j
引用jQuery。
如果您希望使用不带multi_expand.js
的自定义别名jQuery来调整jQuery.noConflict
,最简单的方法是使用匿名函数。
(function($j){
// $j is jQuery
}(jQuery));
或者您可以将第一行更改为:
jQuery(function($j){
// $j is jQuery
这基本上意味着;当文档准备就绪时,运行此函数,jQuery为$ j。