我与我的JS发生冲突,因为其中一个脚本无法正常运行,我试图在文档中使用多个JavaScript,我将使用三个,现在已经有冲突,我只有两个到目前为止的文件中... :(head
中的第一个:
<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script>
<script type="text/javascript" src="javascript/jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
body
中的第二名:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'243px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content')
.stop(true,true)
.fadeOut()
.find('p')
.stop(true,true)
.fadeOut();
}
</script>
从我所看到的可能是导致问题的“功能”。请帮助...并且如何避免这些问题,我确定很多人一直在使用多个js,您只是希望并祈祷它不会弄乱吗?
编辑:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
最佳答案
清理源代码可能有助于调试过程。
您可以仅创建一个单独的javascript文件,而不必使用文档正文/头中的脚本标签中包含的javascript。将所有外部脚本标签放在文档的开头。包含上述所有代码的自定义javascript文件应最后调用。
您的单击/悬停功能应该包含/绑定在document.ready函数中。
另外,您正在调用重复脚本,jcarousel.js和jcarousel.min.js是同一脚本。一个只是缩小版本。因此,您可能会产生冲突,并且对jquery调用也是如此。尝试仅使用一个版本的jQuery,即scriptsrc.net中的最新版本
因此,您生成的html文档将如下所示:
<head>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script>
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<!-- your custom js -->
<script type="text/javascript" src="javascript/yourCustom.js"></script>
</head>
您的自定义js文件将如下所示。
function expand($elem) {
var angle = 0;
var t = setInterval(function() {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({
rotate : '+=-40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '243px'
}, 1000).find('.item_content').fadeIn(400, function() {
$(this).find('p').stop(true, true).fadeIn(600);
});
}//end expand
function collapse($elem) {
var angle = 1440;
var t = setInterval(function() {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({
rotate : '+=40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '52px'
}, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}//end collapse
$(document).ready(function() {
//Carousel setup
$('#jcarouselMetro').jcarousel({
scroll : 1,
wrap : 'both'
});
$('#jcarouselInvites').jcarousel({
scroll : 1,
wrap : 'both'
});
//end carousel
//item hover function
$('.item').hover(function() {
var $this = $(this);
expand($this);
}, function() {
var $this = $(this);
collapse($this);
});
//end hover
});//end document ready
除此之外,您可能需要定义一个clearInterval函数。除非它是您包含的众多库之一的一部分,否则它在您的展开和折叠功能中会被调用。
希望这可以帮助...