我可以将动作绑定到特定的facebox吗?

Question

我想绑定一个函数来关闭一个特定的facebox?根据facebox(在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(!)来实现这个工作:

用你自己的方法覆盖facebox#close方法。
这个方法的作用域将允许你访问刚刚点击的"close"链接
2. 现在你可以遍历"横向"到你的内容，并使用例如数据属性或类名来确定你当前显示的框
在此基础上，你可以决定做什么。

下面是一个例子:

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，真的不是很漂亮。也许别人能想出更好的办法。