0

スクリプトの 1 つが正しく機能していないため、JS と競合しています。ドキュメントで複数の JavaScript を使用しようとしています。3 つ使用する予定ですが、すでに競合が発生しており、2 つしかありません。これまでのドキュメントでは... :(

最初のhead:

<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script>
<script type="text/javascript" src="javascript/jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#jcarouselMetro').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
    jQuery('#jcarouselInvites').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
});
</script>

の 2 番目body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
    function(){
        var $this = $(this);
        expand($this);
    },
    function(){
        var $this = $(this);
        collapse($this);
    }
);
function expand($elem){
    var angle = 0;
    var t = setInterval(function () {
        if(angle == 1440){
            clearInterval(t);
            return;
        }
        angle += 40;
        $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
    },10);
    $elem.stop().animate({width:'243px'}, 1000)
                .find('.item_content').fadeIn(400,function(){
                    $(this).find('p').stop(true,true).fadeIn(600);
                });
}
function collapse($elem){
    var angle = 1440;
    var t = setInterval(function () {
        if(angle == 0){
            clearInterval(t);
            return;
        }
        angle -= 40;
        $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
    },10);
    $elem.stop().animate({width:'52px'}, 1000)
                .find('.item_content')
                .stop(true,true)
                .fadeOut()
                .find('p')
                .stop(true,true)
                .fadeOut();
}
</script>

私が見ることができるのは、問題を引き起こしている可能性のある「機能」です。助けてください...どうすればこれらの問題を回避できますか?多くの人が常に複数のjsを使用していると思います.混乱しないことを願っていますか?

編集:

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#jcarouselMetro').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
    jQuery('#jcarouselInvites').jcarousel({
        scroll: 1,
        wrap: 'both'
    });
});
</script>
4

3 に答える 3

1

競合する JavaScript コードが 2 回含まれているという 2 つの問題が見られます。まず、同じカルーセル ライブラリの 2 つのバージョンをここにロードします。

<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>

1 つ目は、同じコードの縮小版です。必要なのは 1 つだけです。上記の 2 行目は不要であり、同じファイルのより大きなバージョンであるため、削除してください。これは問題の原因ではないかもしれませんが、正しくありません。

第 2 に、コードに 2 つのバージョンの jQuery があり、ページ内で非常に異なるタイミングでそれらをロードしていて、機能が非常に異なるため、重大な問題が発生します。これは、noConflict を使用して修正できます。

<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    var jq142 = jQuery.noConflict();
    jq142(document).ready(function () {
        jQuery('#jcarouselMetro').jcarousel({
            scroll: 1,
            wrap: 'both'
        });
        jQuery('#jcarouselInvites').jcarousel({
            scroll: 1,
            wrap: 'both'
        });
    });
</script>

最初の行var jq142 = jQuery.noConflict();では、カルーセル ライブラリ用に正しいバージョンの jQuery が読み込まれていることを確認します。詳細については、noConflict のドキュメントを参照してください。

于 2013-03-13T01:55:28.750 に答える
1

ソース コードをクリーンアップすると、デバッグ プロセスに役立つ場合があります。ドキュメントの body/head 内のスクリプト タグ内に含まれる JavaScript を使用する代わりに、別の JavaScript ファイルを作成するだけで済みます。すべての外部スクリプト タグをドキュメントの head 内に配置します。上記のコードをすべて含むカスタム JavaScript ファイルは、最後に呼び出す必要があります。

クリック/ホバー関数は、document.ready 関数内に含まれている/バインドされている必要があります。

また、重複したスクリプトを呼び出しています。jcarousel.js と jcarousel.min.js は同じスクリプトです。1つは単なる縮小版です。これが原因で競合が発生する可能性が高く、jquery 呼び出しにも同じことが当てはまります。jQuery の 1 つのバージョンのみを使用してみてください。つまり、scriptrc.netの最新バージョンを使用してください。

したがって、結果の html ドキュメントは次のようになります。

<head>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script>
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>

<!-- your custom js -->
<script type="text/javascript" src="javascript/yourCustom.js"></script>
</head>

カスタム js ファイルは次のようになります。

function expand($elem) {
    var angle = 0;
    var t = setInterval(function() {
        if (angle == 1440) {
            clearInterval(t);
            return;
        }
        angle += 40;
        $('.link', $elem).stop().animate({
            rotate : '+=-40deg'
        }, 0);
    }, 10);
    $elem.stop().animate({
        width : '243px'
    }, 1000).find('.item_content').fadeIn(400, function() {
        $(this).find('p').stop(true, true).fadeIn(600);
    });
}//end expand

function collapse($elem) {
    var angle = 1440;
    var t = setInterval(function() {
        if (angle == 0) {
            clearInterval(t);
            return;
        }
        angle -= 40;
        $('.link', $elem).stop().animate({
            rotate : '+=40deg'
        }, 0);
    }, 10);
    $elem.stop().animate({
        width : '52px'
    }, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}//end collapse


$(document).ready(function() {

    //Carousel setup
    $('#jcarouselMetro').jcarousel({
        scroll : 1,
        wrap : 'both'
    });
    $('#jcarouselInvites').jcarousel({
        scroll : 1,
        wrap : 'both'
    });
    //end carousel

    //item hover function
    $('.item').hover(function() {
        var $this = $(this);
        expand($this);
    }, function() {
        var $this = $(this);
        collapse($this);
    });
    //end hover

});//end document ready

これらすべてに加えて、clearInterval 関数を定義する必要がある場合があります。展開関数と折りたたみ関数で呼び出されるため、含めた多くのライブラリの一部でない限り。

お役に立てれば...

于 2013-03-13T01:29:40.497 に答える
0

これを使用して、ライブラリの 1 つのバージョンのみをロードできます。IE6、7、8 では 1.3.2、その他すべてのブラウザでは 1.9.1。

<!--[if lt IE 9]>
    <script src="jquery-1.3.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-1.9.1.js"></script>
<!--[endif]-->
于 2013-03-13T00:35:04.227 に答える