1

我遇到了一些冲突的 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>
4

2 回答 2

2

您加载了 jQuery 库两次，版本号也略有不同（1.7 与 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>
于 2013-01-24T22:21:42.450 回答
0

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

于 2013-01-24T22:31:21.917 回答