Question

我遇到了一些冲突的javascripts问题。我有一个脚本创建一个下拉菜单，以及一组使fancybox工作的脚本。但是，当两组脚本都在我的标题代码中时，它们会发生冲突，只有一个函数可以正常工作。我在代码中首先放置的脚本是不起作用的脚本。

我对javascript / jquery知之甚少，我只是简单地使用了一些人给我放入HTML的脚本（我非常了解它）。如果有人可以帮助解决问题（并为我愚蠢一点:)）这将是非常有帮助的。

我曾尝试使用控制台检查脚本中的冲突，但我有点迷失，不知道我应该在那里看到什么。如果有人想告诉我如何在控制台中正确检查问题，那也会有效，尽管我不能保证单独帮助我。

这是我的主页html文件头部中首先使用fancybox的代码（这样，fancybox不起作用，但是下拉菜单会这样做）：

<!--dropdown menu script starts here--> 
<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>
<!--dropdown menu script ends here-->   

<!--fancybox script starts here-->      
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {

    // fancybox for vimeo
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video'
    });

    $('.fancybox').fancybox(
    {
    padding : 0,
    openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
    wrapCSS    : 'fancybox-custom',
    closeClick : true,
    helpers : {
    overlay : {
    css : {
    'background-color' : '#000'
    }
    },
    thumbs  : {
    width   : 50,
    height  : 50
    }
    }
    }
    );
    }
    );

    $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>

Answer 1

您正在加载jQuery库两次，版本号也略有不同（1.7 vs. 1.7.2）。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>

正如评论中所提到的，你也在其他地方加载它。一次就够了！

修改

你也在这里加载jQuery（两次）：

<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/common/js/jquery.main.js"></script>

Answer 2

首先，正如你可以从其他人那里看到的，你在那里有太多的JQuery。 Fancybox虽然有JQuery 1.8的问题，所以你想要坚持使用1.7版本。摆脱下拉区域顶部的1.8脚本，现在摆脱google的cdn版本，只需使用fancybox附带的1.7.2。最后，将剩下的一条Jquery行移到页面顶部，它必须先加载。我不知道下拉代码，但它应该适用于JQuery 1.7。不确定这是否会解决您的问题，但这是一个更清晰的起点。

Fancybox与Jquery冲突

2 个答案: