Question

首先，如果我遇到这个问题已经解决了五千五百万次，我想道歉。不幸的是，我在这里找不到答案。此外，我对jQuery的方式非常环保，所以原谅我对这个主题的无知。

我在3个区域使用jQuery（不确定使用什么术语） - 滚动功能，fancybox图库和“返回顶部”按钮。其中任何两个都可以很好地协同工作，当我尝试实现这三个时，我就失去了fancybox。

这是来自头部的代码：

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(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}, 900, 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 [];
    }
});
</script> 
<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });

});
</script>

从身体标签下方：

<script type="text/javascript">

$(document).ready(function(){
    $(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
$(".fancybox").fancybox({
    nextEffect  : 'fade',
    prevEffect  : 'fade',
    padding     : 0,
    margin      : [15, 15, 40, 15],
    afterLoad   : addLinks,
    beforeClose : removeLinks
});

function addLinks() {
    var list = $("#links");

    if (!list.length) {    
        list = $('<ul id="links">');

        for (var i = 0; i < this.group.length; i++) {
        $('<li data-index="' + i + '"><label></label></li>').click(function() {
            $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
        }

        list.appendTo( 'body' );
    }

    list.find('li').removeClass('active').eq( this.index ).addClass('active');
}

function removeLinks() {
    $("#links").remove();    
}
</script>

Answer 1

太多信息无法发表评论，所以：

使用调试控制台。使用Firefox（以及Chrome），您可以打开一个javascript控制台，查看是否有任何错误被抛出：Read this article for Firefox Tools - 并确保查看“Web控制台”部分。
缩进代码。我已编辑您的问题以反映正确的缩进。这样做可以更容易地揭示问题。
下面是一段代码，它会引发一个javascript错误，这会阻止所有 javascript在页面上运行。

代码：

function addLinks() {
    var list = $("#links");

    if (!list.length) {    
        list = $('<ul id="links">');

        for (var i = 0; i < this.group.length; i++) {
        $('<li data-index="' + i + '"><label></label></li>').click(function() {
            $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
        // Changed below to close the parenthesis for the .click function...
        });

        list.appendTo( 'body' );
    }

    list.find('li').removeClass('active').eq( this.index ).addClass('active');
}

新手有jQuery冲突问题

1 个答案: