Question

我正在使用JQuery进行一些下拉导航功能。工作得很好。现在我刚刚添加了Cycle JQuery插件，我一次只能运行一个，这取决于我在头部列出的顺序。我已经阅读了关于jQuery.noConflict（）;功能但不确定在哪里放。这就是我得到的。

HTML

<head>
    <title>#</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="online restaurant employee scheduling, employee scheduling, scheduling software, employee scheduling software,   restaurant scheduling, restaurant scheduling software, restaurant schedules, restaurant employee scheduling, online scheduling, online scheduling software" name="keywords"/>
    <meta content=" easy-to-use, Web-based restaurant labor management solutions and workforce management software offers flexible, effective and improved communication for employees and managers." name="description"/>
    <meta content="index, follow" name="robots"/>
    <meta content="no-cache" http-equiv="cache-control"/>
    <meta content="no-store" http-equiv="cache-control"/>
    <meta content="0" http-equiv="expires"/>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="Rh52pxT6lFEqOVMlSt7QpOVHb325OHdlGkWZ0QMUSbU" name="google-site-verification"/>

    <link rel="stylesheet" href="stylesheets/style.css" media="screen" />

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <script src="js/slideshow.js" type="text/javascript"></script>

</head>

当它的结构如下时，我的Cycle Plugin可以工作但不会导航下拉列表。以下是相应的.js文件，其中nav为：menu.js，Cycle Plugin为：slideshow.js

menu.js

$(document).ready(function () {   

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

});

slideshow.js

$('#slideshow').cycle({ 
   speed:      200,
   timeout:    0, 
   pager:      '#tabs', 
   pagerEvent: 'mouseover' 
});

Answer 1

来自documentation of noConflict()：

注意：必须调用此函数 包含jQuery javascript之后文件，但包括任何其他之前冲突的库，以及之前实际上其他冲突使用库，以防jQuery 最后一个。 noConflict可以在jQuery.js的末尾调用文件全局禁用$（） jQuery别名。

在jquery包含后，只需在脚本中添加一个脚本标记即可运行noConflict（）函数（例如取自“Using jQuery with noConflict”页面）：

<head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>

Answer 2

我看不出为什么你需要jQuery.noConflict()使用$变量与其他脚本有关。请参阅documentation。

相反，正如Ryan所说，您需要将周期代码放在$(document).ready()内，以便slideshow.js成为：

$(document).ready(function () { 
    $('#slideshow').cycle({ 
        speed:      200,
        timeout:    0, 
        pager:      '#tabs', 
        pagerEvent: 'mouseover' 
    });
});

Answer 3

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>jQuery.noConflict();</script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/slideshow.js" type="text/javascript"></script>

menu.js：

(function($){
$(document).ready(function () {   

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

}); 
})(jQuery);

slideshow.js：

(function($){

 $('blah').cycle()
})(jQuery);

jquery冲突 - 如何使用jQuery.noConflict（）;

3 个答案: