$.fancybox( elem ) 有效，但 $( elem ).fancybox() 无效答案

【问题标题】：$.fancybox( elem ) works but $( elem ).fancybox() does not$.fancybox( elem ) 有效，但 $( elem ).fancybox() 无效
【发布时间】：2014-11-06 17:52:08
【问题描述】：

Jquery 1.11.1
FancyBox 2.1.5

正如标题所描述的那样，

$.fancybox( elem )   // works!
$( elem ).fancybox() // Returns `elem`, but doesn't instantiate the Popup

我会低头选择第一个选项，因为它有效，但我不能以这种方式将选项传递给 FancyBox。

有什么想法吗？谢谢！

【问题讨论】：

能否提供图书馆的链接|？
fancybox.net/api
它的函数使用的是 jquery 命名空间格式，这就是为什么，看这个：sitepoint.com/5-ways-declare-functions-jquery
$( elem ).fancybox() 只是将fancybox 绑定到elem 但仍需要click 事件（在elem 上）来触发fancybox。另一方面，$.fancybox(elem) 以编程方式使用elem 作为其内容jsfiddle.net/gL9dre97 触发fancybox，它等效于$.fancybox({ content: elem }); jsfiddle.net/gL9dre97/1 ...如果elem 是一个引用（例如内联容器），它类似于$.fancybox({ href: elem });jsfiddle.net/gL9dre97/2
@Trip : 为文档目的添加了另一个案例场景

标签： jquery fancybox fancybox-2

【解决方案1】：

案例1：

$( elem ).fancybox({
    // API options
});

... 只是将fancybox 绑定到elem，但仍需要click 事件（在elem 上）来触发fancybox。请参阅JSFIDDLE

案例2：

$.fancybox(elem,{
    // API options
});

...使用elem 作为其内容以编程方式触发fancybox。 JSFIDDLE

案例 3：

$.fancybox({ 
    content: elem,
    // other API options
});

...它类似于 case 2，但使用不同的语法。它通常用于将任意 HTML 作为内容传递（通常需要将 type 设置为 html）。 JSFIDDLE

案例4：

如果elem 是一个引用（例如inline 容器），那么您可以这样做

$.fancybox({ 
    href: elem,
    // other API options
});

JSFIDDLE

案例 5：

$.fancybox([object],{
    // API options
});

...您可以在其中传递 javascript objects 的集合，例如：

var elem = [{
    href: "images/image01.jpg",
    title: "title 01"
}, {
    href: "images/image02.jpg",
    title: "title 02"
}];

见JSFIDDLE

注意：以上所有场景均适用于 fancybox v1.3.4 或 v2.x

【讨论】：

【解决方案2】：

只是将其发布为部分答案。使用有效的非官方语法，我可以写：

$.fancybox({ content: elem });

然后我可以传递选项以及elem

【讨论】：