jquery类库和其他js类冲突的解决方法
今天做项目的时候同一页面两效果发生冲突,经观察发现是prototype和jquery冲突了。
prototype的选择器是"$"
jquery的选择器也是"$"
解决方法是:
将jquery的"$"改为其他的,如"$j"。
先将所有需要导入的js导入后,再在运行脚本处,加上一行:$j = jQuery.noConflict();
其后将其所用特效的所有"$"都改为"$j"
问题解决。
<script language="javascript" type = "text/javascript" src="content/script/prototype.lite.js"></script>
<script language="javascript" type = "text/javascript" src="content/script/moo.fx.js"></script>
<script language="javascript" type = "text/javascript" src="content/script/moo.fx.pack.js"></script>
<script language="javascript" type = "text/javascript" src="content/script/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
function slideSwitch() {
var $jactive = $j('#slideshow IMG.active');
if ($jactive.length == 0) $jactive = $j('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $jnext = $jactive.next().length ? $jactive.next()
: $j('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$jactive.addClass('last-active');
$jnext.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function() {
$jactive.removeClass('active last-active');
});
}
$j(function() {
setInterval("slideSwitch()", 4000);
});
</script>