Jquery-Mootools 冲突

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>

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

问题是，如果 jquery.noconflict 存在，mootool 脚本可以工作，但 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应该更好地说明