实施例

Question

我有一个网站，其中包含很多js函数，我想从mootools添加一个登录表单。我添加了表单和它工作所需的文件，但另一个站点停止我知道这是javascript冲突这是我的头文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="tr" >
<head>
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> 
    <!--Site CSS-->
    <link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
    <!-- Latest Jquery Lib-->
    <script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
    <!-- Mootools - the core -->
    <script type="text/javascript" src="include-js/mootools12.js"></script>
    <!-- MooSlide (show/hide login form) -->
    <script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
    <!--News scroller-->
    <script type="text/javascript" src="include-js/jscroller-0.4.js"></script>

    <!--timer for ticking at live games and to update information each minute-->
    <script type="text/javascript" src="include-js/jquery_timer.js" ></script>
    <!-- MY JS FILES-->
    <script type="text/javascript" src="include-js/functions.js"></script>
    <script type="text/javascript" src="include-js/script.js" ></script>


    <script language="javascript" type="text/ecmascript">
    window.addEvent('domready',function(){
        var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
        //optional: AutoStart the slider on page load:
        //MyLogin.run();
        $('close').addEvent('click', function(e){
            e = new Event(e);
            myLogin.clearit();
            e.stop();
        });
    });
    </script>

</head>

该脚本用于mootools，并且评论了所需的文件。我运行网站时收到此错误：

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

和

Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B;}var A=$type(B);return($[A])?$[A](B,C,this.document):null;} has no method 'ajax'

是否有人可以帮助我知道我是否应该更改JS文件的顺序，还是我可以做些什么来阻止冲突？

P.S：当我在标题中更改mootools文件的位置时，我得到不同的消息。

Answer 1

将$替换为jQuery 例如，而不是使用

$("div p").hide()使用jQuery("div p").hide();代替

http://api.jquery.com/jQuery.noConflict/

Aslo试试这个

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

Answer 2

尝试替换你的mootool js和jquery脚本的命令并再次检查？

实施例

    <script type="text/javascript" src="jquery-1.3.js"></script>
    <script type="text/javascript">
        //no conflict jquery
        jQuery.noConflict();
        //jquery stuff
        (function($) {
            $('p').css('color','#ff0000');
        })(jQuery);
    </script>
    <script type="text/javascript" src="moo1.2.js"></script>
    <script type="text/javascript">
        //moo stuff
        window.addEvent('domready',function() {
            $$('p').setStyle('border','1px solid #fc0');
        });
    </script>

尝试使用此代码

    <!--Site CSS-->
    <link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />

    <!--///// MOOTOOLS /////-->
    <!-- Mootools - the core -->
    <script type="text/javascript" src="include-js/mootools12.js"></script>
    <!-- MooSlide (show/hide login form) -->
    <script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>    
    <script type="text/javascript">
        window.addEvent('domready',function(){
            var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
            //optional: AutoStart the slider on page load:
            //MyLogin.run();
            $('close').addEvent('click', function(e){
                e = new Event(e);
                myLogin.clearit();
                e.stop();
            });
        });
    </script>

    <!--///// JQUERY /////--> 
    <!-- Latest Jquery Lib-->
    <script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>   
    <!--News scroller-->
    <script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
    <!--timer for ticking at live games and to update information each minute-->
    <script type="text/javascript" src="include-js/jquery_timer.js" ></script>
    <!-- MY JS FILES-->
    <script type="text/javascript" src="include-js/functions.js"></script>
    <script type="text/javascript" src="include-js/script.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // jquery scripts                              
        });
    </script>

如何包含mootools js文件？

2 个答案:

实施例

尝试使用此代码