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

Answer 2

如果你确定另一个库也会使用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>

Answer 3

解决！

按照Joseph的说明，我将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>

谢谢大家！

防止多个JQuery脚本破坏代码

3 个答案: