Javascript错误导致fancybox无法在Firefox上运行

Javascript error causing fancybox not to work on firefox

本文关键字：Firefox 运行 错误 fancybox Javascript      更新时间：2023-09-26

我在这个网站上使用js没有冲突 http://tidypools.com/tid-temp

花式盒子在火狐浏览器上不起作用。当我使用Firebug时，它给了我以下错误：

错误行：99

Safari 也给出了一个错误：

类型错误："[对象对象]"不是函数(靠近"...}"((jQuery(;关闭编号...'(

当我打开脚本第 99 行时，它是脚本中的最后一行：

})(jQuery); //CLOSE NO CONFLICT//

我尝试了一个js清理器，去掉括号，分号，移动等......似乎没有任何效果。任何关于它错在哪里的想法。谢谢你们。

这是指向 js http://tidypools.com/tid-temp/js/plugins.js 的链接，因为它比在此处复制它更容易阅读。

@Kreshnik 哈萨纳吉

这是插件.js文件中花哨框的代码：

        // ******************************** LIGHTBOX ********************************
    $(".fancybox").fancybox();
    $(".grouped_elements").fancybox({
        helpers: {
            title: {
                type: 'inside'
            }
        }
    })
});
// ******************************** LIGHTBOX MOBILE ********************************
$(".mobile_grouped_elements").attr('rel', 'gallery').fancybox({
    padding: 0,
    margin: 5,
    nextEffect: 'none',
    prevEffect: 'none',
    autoCenter: true,
    afterLoad: function() {
        $.extend(this, {
            aspectRatio: true,
            type: 'html',
            width: '90%',
            height: '80%',
            content: '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
        });
    }
});

从代码的第一眼看，问题并不明显。

你有这个：

//**************************************************************************
// ******************************** NO CONFLICT ********************************
jQuery.noConflict() // return `$` to it's previous "owner"
(function($) { // in here you're assured that `$ == jQuery`
// ... left out code that is not important for the problem ....
})(jQuery); //CLOSE NO CONFLICT//

这部分的问题在于，jQuery.noConflict()后你会错过一个;。

对于JS解释器，它看起来像： 

jQuery.noConflict()(
    function($) {
    }
})(jQuery);

由于jQuery.noConflict()没有返回函数，因此会出现此错误。为了避免此类问题，即使在某些情况下可以省略;，也要添加它。

更新

除了缺少 t.niese 所述的分号外，我刚刚意识到我还有一个额外的"}("在导致问题的第一个灯箱代码的第 8 行上。

我把它改成了

// ******************************** LIGHTBOX ********************************
    $(".fancybox").fancybox();
    $(".grouped_elements").fancybox({
        helpers: {
            title: {
                type: 'inside'
            }
        }
    });

它现在正在工作。

感谢大家的帮助！

相关文章：