我与我的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函数。除非它是您包含的众多库之一的一部分,否则它在您的展开和折叠功能中会被调用。

希望这可以帮助...

10-05 20:43
查看更多