Javascript 如何在 Fancybox 的 onComplete 事件中使用 $(this) ？

How can I use $(this) inside of Fancybox's onComplete event?

提问by Ray Brown

I'm trying to use jQuery's $(this)inside of Fancybox's onCompleteevent, but I'm running into trouble. Here's my javascript code:

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

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

I have simplified the code above to get my point across, but I actually would love to use $(this)for several reasons that I won't go into here.

我已经简化了上面的代码来表达我的观点，但实际上我很想使用它$(this)，因为我不会在这里讨论的几个原因。

Fancybox's documentation shows examples of using thisinstead of $(this)within its documentation, but I didn't see any examples where either were used inside of onCompleteor other events. I of course tried using this, much to no avail.

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

Does anyone know how I can reference the triggered a.iframeelement by using $(this)or any other means withinthe onCompleteevent?

有谁知道我可以参考触发a.iframe使用元素$(this)或其他任何方式中的onComplete事件？

Edit:I got this to work using Blackcoat's suggestion, and here's the final syntax that worked:

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

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

回答by emphaticsunshine

$(this) points to Fancybox object so thats why it doesn't point to element. If you are trying to get the target element, you can do something like this:

$(this) 指向 Fancybox 对象，所以这就是它不指向元素的原因。如果您正在尝试获取目标元素，您可以执行以下操作：

var $self = $(this.element);

回答by Blackcoat

Bitmanic,

比特狂，

Sadly, you're out of luck using this, but you can still reference the current link. Define your callback to accept an array of links selected by jQuery as its first parameter, and an index as the second parameter:

遗憾的是，您使用 时不走运this，但您仍然可以参考当前链接。定义您的回调以接受 jQuery 选择的链接数组作为其第一个参数，并接受一个索引作为第二个参数：

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

Here's how Fancybox invokes the onComplete hander:

以下是 Fancybox 调用 onComplete 处理程序的方式：

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

They aren't using Javascript's callor applyto invoke this function as a method of an object. In other words, thiswill refer to the global scopeof your application (i.e. the documentobject), so you can't use it to refer back to the object being acted upon (shame on them). Instead, they pass three parameters to the callback for specifying context: currentArray(the selected object), currentIndex, and currentOpts.

他们不使用 Javascriptcall或apply调用此函数作为对象的方法。换句话说，thiswill 指的是你的应用程序的全局范围（即document对象），所以你不能用它来指代正在处理的对象（对它们感到羞耻）。相反，它们将三个参数传递给回调以指定上下文：（currentArray所选对象）currentIndex、 和currentOpts。

回答by Taylor Hawkes

Here is my approach - also best approach:

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

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

You can see in action at http://www.giverose.com

您可以在http://www.giverose.com 上查看实际操作

回答by Neromancer

For those who need to get a reference to the link target in Fancybox v2.x events, you can get it like this:

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

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

e.g.

例如

$('.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                  
   }
});

回答by Ian Oxley

Doing something like this should work:

做这样的事情应该有效：

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

By storing $('a.iframe')in a local variable you can access it inside your onCompletecallback function. Or, to put it another way:

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

...inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s). A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function. Those local variables, parameter and function declarations (initially) have the values that they had when the outer function returned and may be interacted with by the inner function.

...内部函数可以访问其外部函数中的所有局部变量、参数和声明的内部函数。当这些内部函数之一在包含它的函数之外可以访问时，就会形成一个闭包，以便它可以在外部函数返回后执行。此时它仍然可以访问其外部函数的局部变量、参数和内部函数声明。这些局部变量、参数和函数声明（最初）具有它们在外部函数返回时的值，并且可能与内部函数进行交互。

回答by Rob

I've been having a nightmare today with a similar issue. A solution that we've found works:

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

When calling the fancybox, set a callback function, eg:

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

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

then in the callback function, use something like this:

然后在回调函数中，使用这样的东西：

// 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];
}

we've found this works for our inline requirements. We can use divid to do whatever processing of the fancybox content that needed doing.

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

回答by Dan

did you try something like this:

你有没有尝试过这样的事情：

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

This could be your solution, although you have to write more with less convenience.

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