javascript - jquery 和 mootools 冲突 - 一个脚本有效，另一个无效

Question

好吧，我使用mootools通过google map 显示flash内容，并且我努力让它正常工作，所以很少有机会将其切换到jQuery。另一方面，我发现 jQuery 对其他事情更有用，所以我试图让它一起工作。那是为了解释。现在这是代码。

我用这个 jQuery 脚本来显示/隐藏动画，它与 mootools 完美配合

<script type="text/javascript">
jQuery(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
 jQuery('#slickbox').hide();
 // toggles the slickbox on clicking the noted link  
  jQuery('#slick-toggle').click(function() {
    jQuery('#slickbox').toggle(400);
    return false;
  });
});

最近，我将脚本添加到动画流动菜单中，但无法使其工作。我尝试应用 noConflict，但没有成功。这是代码:

<script language="text/javascript">
var $j = jQuery.noConflict();
var name = "#floatMenu";
var menuYloc = null;
    $j(document).ready(function(){
        menuYloc = parseInt($j(name).css("top").substring(0,$j(name).css("top").indexOf("px")))
        $j(window).scroll(function () { 
            offset = menuYloc+$(document).scrollTop()+"px";
            $j(name).animate({top:offset},{duration:500,queue:false});
        });
    }); 
 </script>

错误消息是 Uncaught TypeError: Object # has no method 'dispose' 非常感谢。

Answer 1

以这种方式格式化代码，并且不需要使用noConflict()。在之后立即调用jQuery.noConflict(); jQuery 和 MooTools 库已加载。

<script type="text/javascript">
(function($){
    var name = "#floatMenu",
        menuYloc = null;
    $(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
        $(window).scroll(function () { 
            var offset = menuYloc+$(document).scrollTop()+"px";
            $(name).animate({top:offset},{duration:500,queue:false});
        });
    });
})(jQuery);
</script>

这会将您的代码封装到一个函数中，该函数将传递 jQuery 对象。在该函数内任何使用 $ 的地方，它都会引用 jQuery。

此外，没有属性 language 的值为 "text/javascript"，它是 type 属性，它应该具有该值。不要再使用语言属性。