在同一页面中同时使用 Prototype 和 jQuery 的问题答案

【问题标题】：Problem using both Prototype and jQuery in the same page在同一页面中同时使用 Prototype 和 jQuery 的问题
【发布时间】：2011-09-10 11:22:25
【问题描述】：

当我对内联窗口和原型使用 jquery 脚本来切换菜单时，我遇到了冲突。当我使用两者之一时工作正常。但是，当我同时使用它们时，只有原型有效。我读到了 jquery.noconflict 但我可以正确使用它。这些是脚本。

这是我的 jquery 脚本（内联窗口）

<script type="text/javascript">

$(document).ready(function(){

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    }); //fade them both out

        return false;
    });


});

</script>

这是我的原型脚本

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>  

<script type="text/javascript">  
// <![CDATA[  
// Making sure this code only executes when the document is loaded: this makes the DOM available to us  
Event.observe(document, 'dom:loaded', function() {  

    // for every element with an toggler class...  
    $$('.toggleExample').each(function(element) {  

        // we put on an event listener of the click type  
        Event.observe(element, 'click', function(event){   

            // We stop the default link behaviour  
            Event.stop(event);  

            // when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),   
            // and select its following sibling (next(0)), and toggle that shit.  
            Event.element(event).up(0).next(0).toggle();  

        }, false);  

    });  

});  
// ]]>  
</script>

【问题讨论】：

如果是我的，我会将 Prototype 菜单切换功能转换为 jQuery 并完成。
嗯，这是一种解决方法，但我已经构建了。如果我没有得到解决方案，我会去争取它
维护一个库，减少冲突，减少要加载的 JS 代码等等......当你这样做时，你会更快乐。
我尝试了所有三个答案并没有得到它的工作。我要使用 jquery

标签： javascript jquery prototypejs conflict

【解决方案1】：

1.- 加载 jQuery 库。 2.- 做你的 jQuery 东西 3.- 加载原型库 4.- 做你的原型的东西

你应该在 jQuery 上使用 noConflict 函数，你的 jQuery 东西应该这样开始：

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>

如果您需要更多信息，请查看 jQuery API http://api.jquery.com/jQuery.noConflict/

【讨论】：

【解决方案2】：

把这个放在嵌入的 jquery.js 之后：

<script  type="text/javascript">
$.noConflict();
</script>

并改变这一行：

$(document).ready(function(){

到

jQuery(document).ready(function($){

【讨论】：

O_o ...所以$(document).ready 中的 $ 现在将由 Prototype 解释？ Prototype 会按预期处理吗？
不，当使用 $.noConflict() 时，指向 jQuery 的全局变量 $ 将被丢弃，因此 $ 可以被另一个库使用。 document.ready() 中的函数总是会提供一个参数，即 jQuery 本身，所以现在使用 $ 上面的代码将是一个局部变量。请注意编辑，有一个错误，它必须是jQuery(document) 而不是$(document)
啊，我看到你的编辑了。全局范围内的“$”标记必须替换为“jQuery”标记。这就是让我感到困惑的原因。
你可以使用jQuery(document).ready(function($){的简化方式你可以使用jQuery(function($){

【解决方案3】：

先加载jQuery再调用

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), 
//but consistency is a good thing

然后继续加载其余的东西（包括原型、自定义脚本等）。

最后（这与您上面的第一个示例有关）在您通常使用 $ 的地方使用函数 jQuery。

您的基本问题是 Prototype 和 jQuery 都使用 $ 作为对另一个函数的引用。不幸的是，Prototype 或多或少需要它的$ 定义，这意味着一旦它被加载，其他任何东西都不应该将自己命名为$。 jQuery 的 noConflict 方法去掉了 $ 方法来防止这个问题。

【讨论】：