0

这两个脚本都需要使用 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 [];
    }
});
4

3 回答 3

2

据我所知，除非您在页面中有另一个您没有告诉我们的库（如 dojo 或 mootools），否则 noConflict 无济于事。订单肯定有问题。在你的脚本和 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验证脚本以检查

于 2012-05-21T02:18:32.920 回答
0

如果您确定另一个库也将使用 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>
于 2012-05-21T02:18:04.887 回答
0

解决了！

按照 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>

感谢大家！

于 2012-05-22T00:09:54.463 回答