¿Cómo puedo usar $ (esto) dentro del evento onComplete de Fancybox?

Question

Estoy tratando de usar jQuery's $(this) dentro del evento onComplete de Fancybox, pero me estoy metiendo en problemas. Aquí está mi código javascript:

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

He simplificado el código anterior para conseguir mi punto de vista, pero en realidad me encantaría usar $(this) por varias razones que no voy a entrar aquí.

documentación del FancyBox muestran ejemplos de utilización this en lugar de $(this) dentro de su documentación, pero no vi ningún ejemplos en los que se utilizaron ya sea en el interior de onComplete u otros eventos. Por supuesto, intenté usar this, sin obtener resultados.

¿Alguien sabe cómo puedo hacer referencia al elemento de a.iframe provocada por el uso de $(this) o cualquier otro medio dentro caso onComplete?

Editar: Tengo que esto funcione utilizando Blackcoat 's sugerencia, y aquí está la sintaxis final que trabajaba:

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

Answer 1

Bitmanic,

Lamentablemente, usted está de suerte usando this, pero aún puede hacer referencia al enlace actual. Definir su devolución de llamada para aceptar una serie de enlaces seleccionados por jQuery como primer parámetro, y un índice como el segundo parámetro:

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

Así es como FancyBox invoca el lanzador onComplete:

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

aren' t utilizando Javascript call o apply para invocar esta función como método de un objeto. En otras palabras, this se referirá al alcance global de su aplicación (es decir, el objeto document), por lo que no puede usarlo para referirse al objeto sobre el que se actúa (vergüenza de ellos). En su lugar, pasan tres parámetros a la devolución de llamada para especificar el contexto: currentArray (el objeto seleccionado), currentIndex y currentOpts.

Answer 2

Hacer algo como esto debería funcionar:

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

Al almacenar $('a.iframe') en una variable local se puede acceder a él dentro de su función de devolución de llamada onComplete. O, para put it another way:

...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.

Answer 3

He tenido una pesadilla hoy con un problema similar.obras Una solución que hemos encontrado:

Al llamar a la FancyBox, establece una función de devolución de llamada, por ejemplo:

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

continuación, en la función de devolución de llamada, utilice algo como esto:

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

hemos encontrado que esto funciona para nuestros requisitos en línea. Podemos usar divid para hacer cualquier procesamiento del contenido de fancybox que necesite hacer.

Answer 4

hicieron que intentar algo como esto:

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

Esto podría ser su solución, a pesar de que tiene que escribir más con menos comodidad.

Answer 5

Aquí es mi enfoque - también mejor enfoque:

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

se puede ver en acción en http://www.giverose.com

Answer 6

Para aquellos que necesitan para obtener una referencia al destino del enlace en eventos v2.x. FancyBox, puede obtenerlo así:

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

por ejemplo

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

$ (esto) apunta al objeto Fancybox por lo que no apunta al elemento. Si está tratando de obtener el elemento de destino, puede hacer algo como esto:

var $self = $(this.element);