Question

我一直在尝试制作2个脚本（1个mootol和1个jquery）在同一页面上工作无济于事。正在研究许多论坛和所有但我仍然无法让2个同时工作。

这就是我在标题中的样子：

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> 
     jQuery.noConflict();
$(document).ready(function () { 
         var hide = false; 
     $("#posts-menu, .submenu").hover(function(){ 
         if (hide) clearTimeout(hide); 
         $(".submenu").fadeIn(); 
     }, function() { 
         hide = setTimeout(function() { 
             $(".submenu").fadeOut("slow"); 
         }, 250); 
     }); 

})(jQuery);
    </script>       
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/mootools-core-1.3.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/wall.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/wall-lide.js"></script>

<script type="text/javascript">
<!-- 

window.addEvent('domready',function(){


    // -- horizontal
    var myHorizontalSlide = new Fx.Slide('login-welcome-div-slide', {mode: 'vertical'});


    $('slideout').addEvent('click', function(event){
        event.stop();
        myHorizontalSlide.slideOut();
    });


});

// -->  
</script>

我管理了mootools脚本，即使是jquery.js调用... 你可以看到我已经在第3行使用了jQuery.noConflict(); ..

问题是mootool脚本在jquery.noconflict存在的情况下工作但是jquery脚本不起作用！现在如果删除jquery.noconflict它现在反过来，jquery脚本工作，但不是mootool脚本..我只是不能使其中的2个工作！

任何形式的帮助将不胜感激..

Answer 1

在noConflict模式下运行时，无法使用$便捷方法。您必须使用完整格式jQuery。

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

请避免使用2 js库，因为它会增加您的页面加载时间，从而产生SEO影响（负面影响）。

Answer 2

问题是你没有在匿名函数中包含jQuery代码。试试这个：

(function($){
    // inside here $ will always mean jQuery
    $(document).ready(function () { 
         var hide = false; 
         $("#posts-menu, .submenu").hover(function(){ 
             if (hide) clearTimeout(hide); 
             $(".submenu").fadeIn(); 
         }, function() { 
             hide = setTimeout(function() { 
                 $(".submenu").fadeOut("slow"); 
             }, 250); 
         }); 
    });
})(jQuery);

Answer 3

从MooTools的角度来看。

你在jQuery之后加入了MooTools。非常好。因为（如果你不使用jQuery.noConflict），MooTools会看到其他人已经使用过$并将保留原样。

您必须在MooTools脚本中用document.id（）替换$函数。

jQuery有这种noConflict模式。使用它时，你必须用jQuery（）替换jQuery中的$函数。

要么替换出现的事件，要么可以使用匿名函数在脚本中保留对$的引用，并使其成为MooTools的document.id（）或jQuery的jQuery（）的别名。

(function($) {
    // $ will refer to MooTools' document.id() in this anonymous function
    // ...
})(document.id);

(function($) {
    // $ will refer to jQuery's jQuery() in this anonymous function
    // ...
})(jQuery);

Answer 4

对jQuery部分使用jQuery（区分大小写）而不是$。

Answer 5

你正在破坏$。

<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>

Answer 6

您可以尝试在MooTools库之前包含jQuery库。

这个document应该更好地说明

Jquery-Mootools冲突

6 个答案: