0

Webページで正常に機能する次のコードがあります。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
    $(function(){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/'
        });
    });
</script>
<!--<script src="prototype.js"></script>-->

ただし、コメントを外すとすぐにprototype.jsエラーが発生します。

Uncaught TypeError：nullのメソッド'infiniteCarousel'を呼び出すことはできません。

このprototype.jsファイルは http://prototypejs.org/からのもので、他の機能に使用しています。私はたくさんグーグルで検索しましたが、解決策を思い付くことができません-どうすればこれを解決できますか？

4

1 に答える 1

0

Prototype.js ライブラリが$グローバル変数を引き継いでいます。次の方法で、document.ready ショートカットのスコープ内で $ 変数を jQuery に割り当てることができます。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
    $(function($){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/'
        });
    });
</script>
<!--<script src="prototype.js"></script>-->

この$(document).ready()関数とそのショートカット$(function(){})は、jQuery ファクトリ関数を最初の引数としてコールバックに送信します。その引数に名前を$付けると、その関数内の jQuery としてローカル $ 変数のスコープが設定されます。

将来的には、プロトタイプの後jQuery.noConflictに jQuery を導入し、メソッドを使用して jQuery の制御を放棄することをお勧めし$ます。次に、IIFE ラッパーを使用して、必要な関数内でのみ $ 関数を jQuery に割り当てることができます。

// prototype code using prototype's $ out here
(function($){
    // jQuery code using jQuery's $ goes here
}(jQuery));

この特定のケースでは、$(document).ready()メソッドが既にそれを行っているため、それを行う必要はありません。しかし、そのツールに慣れる必要があります。

そして、プロトタイプを交換する必要があります。:)

于 2012-11-06T12:45:30.847 に答える