0

私はたくさんの答えを見つけました（ほとんどはワードプレスに関するものです）が、まったく役に立たないものはありません. 私はcss/jqueryを初めて使用するので、手を握る必要があります。これを試してみましたが、機能しません。同じページで複数のバージョンの jQuery を使用できますか?

私のコードはここにあります：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu').slicknav();
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var jQuery_1_7_2 = $.noConflict(true);
</script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')     
</script>

<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  var jQuery_1_9_1 = $.noConflict(true);
</script> 
<script src="js/owl.carousel.js"></script>

ページの 2 つの要素にソース コードを使用しました。1 つは jquery-1.7.2.min.js を呼び出し、もう 1 つは jquery-1.9.1.min.js を呼び出します。

1.7.2 はレスポンシブ ナビゲーション バーを制御し、1.9.1 は画像カルーセルで使用されます。現時点では、カルーセル バージョンがナビゲーション バーを無効にします (消えます)。

この競合を解決する方法はありますか?

4

2 に答える 2

2

異なるバージョンが必要であり、プラグインが正しいパターンに従って記述されていると仮定すると、は使用せずnoConflict、プラグインが実行時に正しいパターンにアクセスできるようにスクリプトを配置しますwindow.jQuery。

<script src="js/jquery-1.7.2.min.js"></script>
<!-- plugins that "only work with" 1.7.2: $/jQuery refer to 1.7.2 -->
<script src="js/jquery.slicknav.js"></script>

<script src="js/jquery-1.9.1.min.js"></script>
<!-- everything else: $/jQuery refer to 1.9.1 (but consider 1.11+) -->
<script src="js/owl.carousel.js"></script>

noConflict を使用して別の名前を指定すると、別の名前を認識しているコードがそれを使用できるようになります。これは、標準のプラグインには当てはまりません。

ただし、すべてのプラグインに最新の 1.x (現在は 1.11.1) を使用することを検討してください。jQueryは下位互換性が高く、驚くべき変更はほとんどありません (非推奨のロードマップは長い)。レガシー機能が使用されている場合は、 jquery-migrate.jsを使用して古いコードの変更をシム処理し、移行に関する多くの問題を解消できます。

[jQuery-migrate] を使用して、jQuery で廃止され、バージョン 1.9 で削除された API または機能を検出して復元できます。

于 2014-08-12T16:47:56.607 に答える
0

1.9.1 を使用した作業コード。1.11で実験します

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $('#menu').slicknav();
   });
</script>
<script src="js/owl.carousel.js"></script>
于 2014-08-13T09:03:52.547 に答える