我可以将操作绑定到特定的 Facebox 吗？

Question

我想将一个函数绑定到特定facebox的关闭上？根据 facebox(at github) 上的有限文档，您可以执行类似的操作来绑定操作。

$(document).bind('close.facebox', function() {
    //do stuff...
})

但这样做的问题是，它会将相同的操作绑定到页面上创建的所有 Facebox。

那么如何将不同的功能绑定到不同的facebox呢？我尝试了一些变体，但没有成功（可能是因为我还没有掌握 javascript 和 jQuery 的技能）：

• 按照文档的建议绑定一个通用函数，并在函数中找出关闭的 Facebox 并执行所需的操作。

• 创建 Facebox 时获取句柄并使用它来绑定操作：

  var fb = $.facebox('foo');
  fb.bind('close.facebox', function() { ...do stuff ...})
  

• 直接在 Facebox 上调用绑定，如下所示：

  $.facebox('foo').bind('close.facebox', function() { ...do stuff ...})
  

• 可能有更多我不记得的变体...

请帮助我理解如何我应该这样做（或者为什么我不应该尝试这样做）。

Answer 1

快速查看源代码后，我可以想到一个 hack (!) 来实现此功能：

1. 用您自己的方法覆盖 facebox#close 方法。
2. 此方法中的范围将允许您访问刚刚单击的“关闭”链接
3. 现在您可以“横向”遍历您的内容并使用例如数据属性或类名称来标识您当前显示的框
4. 基于然后您就可以决定要做什么。

这是一个示例：

HTML：

<a href="#foo" class="facebox">Foo</a>
<a href="#bar" class="facebox">Bar</a>
<div id="foo">
    <div data-close="foo">Foo</div>
</div>
<div id="bar">
    <div data-close="bar">Bar</div>
</div>

JS：

$.facebox.close = function(e) {
    var type = $(this).prev().find('div:first').data("close");
    switch (type) {
    case "foo":
        alert("FOO");
        break;
    case "bar":
        alert("BAR");
        break;
    }
    $(document).trigger('close.facebox');
    return false
};

$('a.facebox').facebox();

在这里尝试一下：http://jsfiddle.net/SU3se/ 。

我相信该插件假设您不会在多个“不同”对象上使用它，并且由于您有时只能打开一个 Facebox，因此这“应该”不是问题。但我可以理解为什么有人可能想这样做。

请记住，我的解决方案是一个 hack，而且真的不是很漂亮。也许其他人可以想出更好的办法。