Question

我有几个Jquery库，我不断在一个或另一个之间发生冲突。我不完全确定如何解决这些冲突。我会发布我的图书馆。首先，我将发布我的标题中的javascript包含以及它们的确切顺序：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
    <script type="text/javascript" src="scripts/javascript.js"> </script>
    <script type="text/javascript" src="scripts/prototype.js"></script>
    <script type="text/javascript" src="scripts/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="scripts/lightbox.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>        
    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>

这些是我正在运行的库;这是在index.html上，用于自定义滚动条：

<script>
$(window).load(function() {
mCustomScrollbars();
});

function mCustomScrollbars(){
$("#about").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#graph").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#int").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#arch").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#serv").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#contact").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
}

$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
  return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
}
</script>
<script src="scripts\jquery.mCustomScrollbar.js"></script>

这是针对位于javascript中的手风琴菜单：

$(document).ready(function() {
$('.portfolio').click(function() {
    $('.accordionContent').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
        $(this).next().slideDown('normal');
     } 
 });    
$('.accordionContent').hide();
});
});

最后但并非最不重要的是，库中指示要突出显示的菜单上的哪个按钮（虽然我不会发布所有内容，因为它很长），也在javascript包含文件中：

$(document).ready(function() {
$('#about, #graph, #int, #arch, #serv, #contact').hide();

$('#about_button').click(function() {
$(this).removeClass("about").addClass("highlightabout");
$('#graph_button').removeClass("highlightgraph").addClass("graph");
$('#int_button').removeClass("highlightint").addClass("int");
$('#arch_button').removeClass("highlightarch").addClass("arch");
$('#serv_button').removeClass("highlightserv").addClass("serv");
$('#contact_button').removeClass("highlightcontact").addClass("contact");
$('#graph, #int, #arch, #serv, #contact, #box7').hide();
$('#about').show();
                              }
$('#graph_button').click(function() {
$(this).removeClass("graph").addClass("highlightgraph");
$('#about_button').removeClass("highlightabout").addClass("about");
$('#int_button').removeClass("highlightint").addClass("int");
$('#arch_button').removeClass("highlightarch").addClass("arch");
$('#serv_button').removeClass("highlightserv").addClass("serv");
$('#contact_button').removeClass("highlightcontact").addClass("contact");
$('#about, #int, #arch, #serv, #contact, #box7').hide();
$('#graph').show();
});
});

据我了解，我打算在所有或其中一个库之前加入jQuery.noconflict()？

感谢您的帮助！

更新：jsfiddle显示我的javascript工作http://jsfiddle.net/hSRDn/

Answer 1

当您使用Prototype时，也会定义$，您需要使用jQuery.noConflict()，因为您已经提到过。

根据jQuerys documentation，您有两种选择：

在包含所有库之后但在编写任何jQuery代码之前，使用noConflict()函数：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

这意味着，jQuery将$返回原型。您需要使用jQuery代替$。例如：

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
  jQuery('#some-elemtent').hide(); // jQuery usage
  $('some-element').observe(....) // prototype usage 

</script>

或者，如果你只在函数范围内使用jQuery（例如在文档加载函数中），你可以像这样绑定$：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

在此函数中，$引用jQuery定义而不是原型。

Answer 2

首先 - 只使用一个jQuery库。您不需要多个。第二：真的，考虑减少库的数量。第三：在包含jQuery之后应该使用$.noConflict()。之后美元符号将不会是jQuery的别名 - 您需要使用jQuery代替$

jQuery冲突

2 个答案: