javascript - 複数の JQuery スクリプトがコードを壊すのを防ぐ

Question

これらのスクリプトはどちらも jQuery ライブラリを使用する必要がありますが、互いにオーバーライドしています。同じライブラリを使用する 2 つ以上の jQuery/Javascript コードを同時に実行するにはどうすればよいですか? script.js と youtube js の両方を機能させようとしています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"
rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.youtubepopup.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>

noConflict を挿入しようとしましたが、これは両方を壊します。

<script type="text/javascript">
    $.noConflict();
    jQuery(function () {
        jQuery("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>

私は試行錯誤を通じてJavaScriptを理解するデザイナーなので、誰かが私が間違っていることを説明できることを願っています. ありがとうございました！

編集：これがscript.jsファイルです

$(function () {
    function filterPath(string) {
        return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }
    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');
    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function () {
        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            // Ensure target exists
            var $target = $(this.hash),
                target = this.hash;
            if (target) {
                // Find location of target
                var targetOffset = $target.offset().top;
                $(this).click(function (event) {
                    // Prevent jump-down
                    event.preventDefault();
                    // Animate to target
                    $(scrollElem).animate({
                        scrollTop: targetOffset
                    }, 400, function () {
                        // Set hash in URL after animation successful
                        location.hash = target;
                    });
                });
            }
        }
    });
    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i < argLength; i++) {
            var el = arguments[i],
                $scrollElement = $(el);
            if ($scrollElement.scrollTop() > 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }
});

Answer 1

私が知る限り、noConflict は、あなたが私たちに伝えていない別のライブラリ (dojo や mootools など) をページに持っていない限り、役に立ちません。順番に何か問題があるはずです。スクリプトと CSS では、常に次の順序を使用してください。

• 外部スタイル
• ページはめ込みスタイル
• スクリプト ライブラリ
• スクリプト プラグイン
• 外部ユーザー スクリプト
• ページ内ユーザー スクリプト

など（わかりやすくするためにURLを短縮しています）：

<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.youtubepopup.min.js"></script>
<script src="script.js"></script>
<script>
    $(function () {
        $("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>

または、 での実行を妨げる何かが存在する必要がありますscript.js。JSLintでスクリプトを検証して確認してください

Answer 2

解決しました！

ジョセフの指示に近づき、script.jsをページ内のユーザースクリプトの下に移動して、YouTubeが機能するために必要な2つのスクリプトがグループ化されるようにしました。

<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.youtubepopup.min.js"></script>
<script>
$(function () {
    $("a.youtube").YouTubePopup({
        autoplay: 1,
        draggable: true,
        hideTitleBar: true
    });
});
<script src="script.js"></script>
</script>

みんな、ありがとう！

Answer 3

$別のライブラリもjQueryの記号を使用することが確実な場合は、次のようにしてください。

<!--jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!--jQuery UI-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!--A jQuery plugin-->
<script type="text/javascript" src="js/jquery.youtubepopup.min.js"></script>
<script type="text/javascript">
    $.noConflict();    //Relinquish $
</script>
<!--Another library-->
<script type="text/javascript" src="js/script.js"></script>

<!--Do stuff here-->
<script type="text/javascript">
    jQuery(function() {
        jQuery("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>