複数のjqueryライブラリを使用したjqueryプラグインの作成

jqueryの複数のバージョンがあります。私はあなたがjqueryの複数のバージョンを使用すべきではないことを認識していますが、私の状況で今起こるのを防ぐことはできません。青い枠線を追加するrenderCalendarというjqueryプラグインを定義しました。 document.ready関数内でプラグインを呼び出すと、renderCalendarは関数ではなく、document.ready以外の関数を呼び出すとプラグインが機能します。私は間違って何をしていますか？外document.ready関数呼び出し複数のjqueryライブラリを使用したjqueryプラグインの作成

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test jQuery conflict</title> 
 
<style> 
 
\t #calendar { 
 
\t \t background: #eee; 
 
\t } 
 
\t #jquery1.7{ 
 
\t \t background: #ccc; 
 
\t } 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<div id="calendar">calendar</div> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t console.log($().jquery); 
 

 
</script> 
 
<div id="jquery1.7">jquery 1.7</div> 
 

 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t (function($){ 
 
\t \t $.fn.renderCalendar = function() { 
 
\t  \t return this.each(function() { 
 
\t   \t $(this).css("border","5px solid blue"); 
 
\t  \t }); 
 
\t \t }; 
 
\t })(jQuery); 
 
\t \t 
 
\t 
 
     $(document).ready(function() { 
 
      $("#calendar").renderCalendar(); 
 
     }); 
 
    
 

 
</script> 
 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
</body> 
 

 
</html>

：だから

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test jQuery conflict</title> 
 
<style> 
 
\t #calendar { 
 
\t \t background: #eee; 
 
\t } 
 
\t #jquery1.7{ 
 
\t \t background: #ccc; 
 
\t } 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<div id="calendar">calendar</div> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t console.log($().jquery); 
 

 
</script> 
 
<div id="jquery1.7">jquery 1.7</div> 
 

 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t (function($){ 
 
\t \t $.fn.renderCalendar = function() { 
 
\t  \t return this.each(function() { 
 
\t   \t $(this).css("border","5px solid blue"); 
 
\t  \t }); 
 
\t \t }; 
 
\t })(jQuery); 
 
\t \t 
 
\t 
 
    // $(document).ready(function() { 
 
    //  $("#calendar").renderCalendar(); 
 
    // }); 
 
$("#calendar").renderCalendar(); 
 
    
 

 
</script> 
 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
</body> 
 

 
</html>

出典

2016-04-06 sonam

を使用すると、$（上のjQueryをロードする際に、このような状況についての私の推測ではありますdocument）.ready、jQueryのバージョンは$（ " #calendar "）...私はちょうどあなたのすべてのjqueryバージョンの呼び出しの下にスクリプトタグを置くと動作します。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test jQuery conflict</title> 
 
    <style> 
 
    #calendar { 
 
     background: #eee; 
 
    } 
 
    
 
    #jquery1.7 { 
 
     background: #ccc; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="calendar">calendar</div> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
    <script type="text/javascript"> 
 
    console.log($().jquery); 
 
    </script> 
 
    <div id="jquery1.7">jquery 1.7</div> 
 

 

 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 

 

 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
    <script type="text/javascript"> 
 
    (function($) { 
 
     $.fn.renderCalendar = function() { 
 
     return this.each(function() { 
 
      $(this).css("border", "5px solid blue"); 
 
     }); 
 
     }; 
 
    })(jQuery); 
 

 

 
    $(document).ready(function() { 
 
     $("#calendar").renderCalendar(); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-04-06 02:16:05

最善の解決策は、すべてのバージョンを削除し、私はjqueryのサードパーティ製のプラグインから注入されている最新のもの –

を維持しようとしています。 jqueryライブラリの順序を変更できません – sonam

使用している特定の3番目の部分プラグインは何ですか？ – HomemadeIcing

複数のjqueryライブラリを使用したjqueryプラグインの作成

答えて

関連する問題