web-dev-qa-db-ja.com

JQuery.noConflict（）を実装するにはどうすればよいですか？

同じHTMLページでjavascriptとjqueryの両方のコードを使用しています。何らかの理由で、jQueryライブラリーがネイティブJavaScriptコードが正常に機能しないようにします。

このページを見つけました： jQuery No Conflict は、jquery.noConflictを使用して$をjavascriptに戻すことができると言っています。しかし、私はこれを行う方法がわかりませんか？

具体的には、これを正しく実装する方法がわかりませんか？ Jqueryコードはどこに行き、JSコードはどこに行きますか？

私のコードは次のとおりです。

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
javascriptjqueryconflict
25
SuperLuigi

_jQuery.noConflict_は_$_変数をリセットするため、jQueryのエイリアスではなくなります。一度呼び出すだけでなく、本当に必要なことは他にあまりありません。ただし、必要に応じて、戻り値を使用して独自のエイリアスを作成できます。

_var jq = jQuery.noConflict();
_

そして、一般的に、jQueryとプラグインを含めた直後にこれを実行したいと思います。

_<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>
_

さらに一歩進んで、noConflict(true)でjQueryを解放することもできます。ただし、このルートを使用する場合は、_$_もjQueryも必要ないため、エイリアスは間違いなく必要になります。

_var jq = jQuery.noConflict(true);
_

この最後のオプションは、主にjQueryのバージョンの混合、特にjQuery自体を更新したい古いプラグインに使用されると思います。

_<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
    var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>
_
36
Jonathan Lonowski

デフォルトでは、jqueryは変数jQueryを使用し、便宜上$が使用されます。競合を回避したい場合、jQueryを次のようにカプセル化するのが良い方法です。

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)
11
Derek Hunziker

間違っていない場合：

var jq = $.noConflict();

その後、jqを使用してjquery関数を呼び出すことができます（何でも）。

jq('#selector');
2
aepheus

JQuery変数に別の名前を付けて、それを引き続き使用できます。

<script type="text/javascript">
  $jq = $.noConflict();
  // Code that uses other library's $ can follow here.
  //use $jq for all calls to jQuery:
  $jq.ajax(...)
  $jq('selector')
</script>
1
Neal

通常、$を使用する別のライブラリを使用している場合に使用されます。

JQueryで$シンボルを引き続き使用するために、私は通常以下を使用します。

jQuery.noConflict()(function($){
  // jQuery code here
});
1
Ivan

APIページの例を見ると、これがあります。例：スクリプトの残りで使用するjQueryの代わりに別のエイリアスを作成します。

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

Jqueryを取り込んだ後にvar j = jQuery.noConflict()を入れてから、競合するスクリプトを取り込んでください。その後、jqueryのすべてのニーズに_$_の代わりにjを使用し、他のスクリプトに_$_を使用できます。

1
scrappedcola

この競合コードを追加して、このエラーを修正しました

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

jQueryファイルとjsファイルを取得した後、ファイルを取得するとエラーが発生し（ブラウザのコンソールで検出）、Magento Webサイトのすべてのエラーjsファイルでこれに続くjQueryですべての「$」を置き換えます。それは私にとって良いことです。ブログで詳細を確認してください こちら

1
Niroshan
/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */

 var jq = $.noConflict();
    (function($){
      $('document').ready(function(){
        $('button').click(function(){
          alert($('.para').text());
        })
      })
    })(jq);


    live view example on codepen easy to understand.
    http://codepen.io/kaushik/pen/QGjeJQ
0
Rajbir Sharma
<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
    <script>
         var $i = jQuery.noConflict();
      // alert($i.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery-1.8.3.js"></script>
    <script>
        var $j = jQuery.noConflict();
      //alert($j.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery.colorbox.js"></script>

    <script src="Js/jquery-1.12.3.js"></script>
    <script>
        var $NJS = jQuery.noConflict();
    </script>

次のようにできます：

<script>
   $i.alert('hi i am jquery-1.4.2.js alert function');
   $j.alert('hi i am jquery-1.8.3.js alert function');
 </script>
0
pankaj prajapati

「fancybox画像ギャラリー」とともにjQueryバージョンを使用する「ブートストラップメニュー」を実装したため、今日この問題が発生しています。もちろん、1つのプラグインは機能し、もう1つのプラグインはjQueryの競合によるものではありませんが、次のように克服しました。

メニューがウェブサイトのページ全体に表示されるため、最初にスクリプトフッターに「ブートストラップメニュー」JSを追加しました。

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>

そして、「fancybox」画像ギャラリーページで次のようになります。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

そして、良いことは両方とも魅力のように働くことです:)

試してみる ：）

0
Al3abMizo Games

それに加えて、trueを$ .noConflict（true）に渡す;また、以前の（存在する場合）グローバル変数jQueryを復元するため、複数のバージョンが使用されている場合にプラグインを正しいjQueryバージョンで初期化できます。

0
Andrew Kolesnikov

デフォルトの$の代わりに使用するカスタム変数をJQueryに割り当てるだけです。その後、JQueryは$が名前空間の競合を起こさないように、新しい関数スコープで自身をラップします。

<script type="text/javascript">
    $jQuery = $.noConflict();
    // Other library code here which uses '$'
    $jQuery(function(){ /* dom ready */ }
</script>
0
AlienWebguy

NoConflict（）メソッドは$ショートカット識別子を解放し、他のスクリプトが次回それを使用できるようにします。

デフォルトのjquery $ as：

// Actin  with $
$(function(){
    $(".add").hide();
    $(".add2").show();
});

またはカスタムとして：

var j = jQuery.noConflict();
 // Action with j
j(function(){
    j(".edit").hide();
    j(".add2").show();
});
0
Kabir Hossain