0

我与我的 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>
4

3 回答 3

1

清理源代码可能有助于调试过程。您可以创建一个单独的 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 函数。除非它是您包含的众多库之一的一部分，因为它在您的展开和折叠函数中被调用。

希望这可以帮助...

于 2013-03-13T01:29:40.497 回答
1

我可以看到两个冲突的 JavaScript 代码被包含两次的问题。首先，您在这里加载同一个轮播库的两个版本：

<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>

第一个是相同代码的缩小版本。你只需要一个，所以删除上面的第二行，因为它不是必需的，它只是同一文件的更大版本。这可能不会导致问题，但这是不对的。

其次，您的代码中有两个版本的 jQuery，这也会导致严重的问题，因为您在页面中加载它们的时间非常不同，它们的功能也非常不同。您可以使用 noConflict 解决此问题：

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    var jq142 = jQuery.noConflict();
    jq142(document).ready(function () {
        jQuery('#jcarouselMetro').jcarousel({
            scroll: 1,
            wrap: 'both'
        });
        jQuery('#jcarouselInvites').jcarousel({
            scroll: 1,
            wrap: 'both'
        });
    });
</script>

第一行将var jq142 = jQuery.noConflict();确保您为轮播库加载了正确版本的 jQuery。阅读noConflict 文档以获取更多信息。

于 2013-03-13T01:55:28.750 回答
0

您可以使用它仅加载一个版本的库。IE6、7、8 上的 1.3.2 和所有其他浏览器上的 1.9.1。

<!--[if lt IE 9]>
    <script src="jquery-1.3.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-1.9.1.js"></script>
<!--[endif]-->
于 2013-03-13T00:35:04.227 回答