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 中始终遵循此顺序:

• 外部样式
• 页内样式
• 脚本库
• 脚本插件
• 外部用户脚本
• 页内用户脚本

等等(为了清晰起见，缩短了网址):

<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 验证脚本检查