我使用了两个不同的jQuery函数，其中一个函数似乎抵消了另一个函数

Question

我正在尝试使用两个jquery来创建一个灯箱和一个滚动条来构建一个单页面网站。它们单独工作都很好，但当我将它们放在同一个页面上时，滚动条似乎抵消了lightbox，使其无效。

以下是lightbox代码：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

下面是滚动条代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    function filterPath(string) {
        return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }
    $('a[href*=#]').each(function() {
        if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash),
                $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function() {
                    $('html, body').animate({
                        scrollTop: targetOffset
                    }, 2000);
                    return false;
                });
            }
        }
    });
});​
// ]]></script>

Answer 1

我注意到你的滚动条代码包含了jquery.js，但是prettyPhoto代码没有。在你的实际网页上，你应该只在两个$(document).ready()之前都包含一次jquery.js。