如何在Fancybox的onComplete事件中使用$（this）？

我正试图在Fancybox的onComplete事件中使用jQuery的$(this) ，但我遇到了麻烦。 这是我的javascript代码：

 $('a.iframe').fancybox({ centerOnScroll: true, onComplete: function(){ var self = $(this); var title = self.title; alert(title.text()); } }); 

我已经简化了上面的代码以获得我的观点，但我真的很想使用$(this) ，原因有几个，我不会在这里讨论。

Fancybox的文档显示了在其文档中使用this而不是$(this)示例，但我没有看到任何在onComplete或其他事件中使用的示例。 我当然尝试使用this ，但无济于事。

有没有人知道如何通过在onComplete事件中使用$(this)或任何其他方法来引用触发的a.iframe元素？

编辑：我使用Blackcoat的建议让这个工作，这里有最终的语法：

 $('a.iframe').fancybox({ centerOnScroll: true, onComplete: function( links, index ){ var self = $(links[index]); var title = self.find('.title').text(); alert(title); } }); 

Answer 1

Bitmanic，

可悲的是，你运气不好，但你仍然可以参考当前的链接。 定义回调以接受jQuery选择的链接数组作为其第一个参数，并将索引作为第二个参数：

  $('a.iframe').fancybox({ centerOnScroll: true, onComplete: function( links, index ){ var self = $(links[index]); var title = self.title; alert(title.text()); } }); 

以下是Fancybox如何调用onComplete hander：

 if ($.isFunction(currentOpts.onComplete)) { currentOpts.onComplete(currentArray, currentIndex, currentOpts); } 

他们没有使用Javascript的call或apply调用此函数作为对象的方法。 换句话说， this将引用应用程序的全局范围 （即document对象），因此您不能使用它来引用要对其执行的对象（对它们感到羞耻）。 相反，它们将三个参数传递给回调以指定上下文： currentArray （所选对象）， currentIndex和currentOpts 。

Answer 2

$（this）指向Fancybox对象，这就是为什么它不指向元素。 如果您尝试获取目标元素，可以执行以下操作：

 var $self = $(this.element); 

Answer 3

这是我的方法 – 也是最好的方法：

  $(".trigger").fancybox({ onStart: function(element){ var jquery_element=$(element); alert(jquery_element.attr('id')) } }); 

您可以在http://www.giverose.com上查看

Answer 4

做这样的事情应该有效：

 var $trigger = $('a.iframe'); $trigger.fancybox({ centerOnScroll: true, onComplete: function(){ alert($trigger.attr('title')); } }); 

通过在局部变量中存储$('a.iframe') ，您可以在onComplete回调函数中访问它。 或者， 换句话说 ：

…允许内部函数访问其外部函数中的所有局部变量，参数和声明的内部函数。 当其中一个内部函数在包含它的函数之外可访问时形成闭包，从而可以在外函数返回之后执行闭包。 此时它仍然可以访问其外部函数的局部变量，参数和内部函数声明。 那些局部变量，参数和函数声明（最初）具有外部函数返回时所具有的值，并且可以由内部函数进行交互。

Answer 5

我今天一直在做一个类似问题的噩梦。 我们发现的解决方案有效：

调用fancybox时，设置回调函数，例如：

 // apply fancybox $(".someclass").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'onCleanup' : ourclosefunction }); 

然后在回调函数中，使用以下内容：

 // callback function function ourclosefunction(links){ // get the div id of the fancybox container // (by taking data after the # from the end of the url) var split = links.toString().split("#"); var divid = split[1]; } 

我们发现这适用于我们的内联要求。 我们可以使用divid来处理所需的fancybox内容。

Answer 6

对于那些需要在Fancybox v2.x事件中获得对链接目标的引用的人，可以这样得到：

 var target = $('a[href=' + this.href + ']'); 

例如

 $('.fancybox').fancybox( beforeLoad : function(test) { var target = $('a[href=' + this.href + ']'); // do something with link }, afterLoad : function(test) { var target = $('a[href=' + this.href + ']'); // do something with link } }); 

Answer 7

你尝试过这样的事情：

 $('a.iframe').click(function() { $.fancybox({ centerOnScroll: true, onComplete: function(){ var title = this.title; alert(title.text()); } }); return false; }); 

这可能是您的解决方案，尽管您必须以更少的便利性编写更多内容。