在同一頁面同時使用Prototype和jQuery的問題

當我使用內聯窗口的jquery腳本和原型來爲菜單創建一個菜單時，我遇到了衝突。當我使用其中一個正常工作。但是，當我使用它們時，只有原型有效。我閱讀了jquery.noconflict，但我可以正確使用它。這些是腳本。在同一頁面同時使用Prototype和jQuery的問題

這裏是我的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>

來源

2011-06-07 EnexoOnoma

如果是我的，我會將原型菜單切換函數轉換爲jQuery並完成它。 – Sparky 2011-06-07 22:50:42

這是一個工作，但我已經建立。如果我沒有得到解決方案，我會努力的。 – EnexoOnoma 2011-06-07 22:52:21

維護一個庫，減少衝突，減少JS代碼的加載等等。當你這樣做的時候，你會更開心。 – Sparky 2011-06-07 22:55:34

將這個權嵌入式的jquery.js後：

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

並更改此行：

$(document).ready(function(){

到

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

來源

2011-06-07 22:44:22

O_o ...所以'$（document）.ready'中的$現在將被Prototype解釋？ Prototype是否會按預期處理它？ – 2011-06-07 22:54:40

不，使用$ .noConflict（）時，全局變量$指向jQuery將被丟棄，所以$可以被另一個庫使用。 document.ready（）中的函數總是會提供一個參數，jQuery本身，所以使用$上面的代碼將成爲一個局部變量。請注意編輯，有一個錯誤，它必須是'jQuery（document）'而不是'$（document）' – 2011-06-07 23:06:57

您好，我試過了，沒有任何結果。 – EnexoOnoma 2011-06-07 23:17:28

第一負荷的jQuery，然後調用

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

然後繼續加載你的東西（包括原型，自定義腳本等）休息。

最後（這與上面的第一個示例有關）使用通常使用$的函數jQuery。

你的基本問題是Prototype和jQuery都使用$作爲另一個函數的引用。不幸的是，Prototype或多或少需要它的$定義，這意味着一旦它被加載，沒有別的應該命名自己$。 jQuery的noConflict方法擺脫了$方法來防止這個問題。

來源

2011-06-07 22:44:42 cwallenpoole

您好，它沒有任何差別...... – EnexoOnoma 2011-06-07 23:17:46

1.-加載jQuery庫。 2：做你的jQuery的東西 3.-裝載Prototype庫 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/

來源

2011-06-07 22:45:03 Grekz

我不能讓它工作... – EnexoOnoma 2011-06-07 23:17:17

在同一頁面同時使用Prototype和jQuery的問題

回答

相關問題