Jquery-Mootools 冲突

Question

我一直在尝试使 2 个脚本（1 个 mootol 和 1 个 jquery）在同一页面上工作，但无济于事。我一直在研究许多论坛等，但我仍然无法使这两个脚本同时工作。

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

<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 脚本不能工作..我只是无法使它们中的两个工作！

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

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 有这种无冲突模式。使用它时，您必须将 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 库。

这个文档应该能更好地说明