[英]How can I use $(this) inside of Fancybox's onComplete event?
我正试图在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
,但无济于事。
有谁知道我怎么可以参考触发a.iframe
使用元素$(this)
的内部或任何其他方式onComplete
事件?
编辑:我使用Blackcoat的建议让这个工作,这里有最终的语法:
$('a.iframe').fancybox({
centerOnScroll: true,
onComplete: function( links, index ){
var self = $(links[index]);
var title = self.find('.title').text();
alert(title);
}
});
$(this)指向Fancybox对象,这就是为什么它不指向元素。 如果您正在尝试获取目标元素,则可以执行以下操作:
var $self = $(this.element);
Bitmanic,
可悲的是,你在外面用运气this
,但你仍然可以参考当前的链接。 定义您的回调以接受由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
。
这是我的方法 - 也是最好的方法:
$(".trigger").fancybox({
onStart: function(element){
var jquery_element=$(element);
alert(jquery_element.attr('id'))
}
});
对于那些需要在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
}
});
做这样的事情应该有效:
var $trigger = $('a.iframe');
$trigger.fancybox({
centerOnScroll: true,
onComplete: function(){
alert($trigger.attr('title'));
}
});
通过在局部变量中存储$('a.iframe')
,您可以在onComplete
回调函数中访问它。 或者, 换句话说 :
...允许内部函数访问其外部函数中的所有局部变量,参数和声明的内部函数。 当其中一个内部函数在包含它的函数之外可访问时形成闭包,从而可以在外部函数返回之后执行闭包。 此时它仍然可以访问其外部函数的局部变量,参数和内部函数声明。 那些局部变量,参数和函数声明(最初)具有外部函数返回时的值,并且可以通过内部函数进行交互。
我今天一直在做类似问题的噩梦。 我们发现的解决方案有效:
调用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内容。
你尝试过这样的事情:
$('a.iframe').click(function() {
$.fancybox({
centerOnScroll: true,
onComplete: function(){
var title = this.title;
alert(title.text());
}
});
return false;
});
这可能是您的解决方案,尽管您必须以更少的便利性编写更多内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.