Comment puis-je utiliser $ (this) dans l'événement onComplete de Fancybox?

Question

J'essaie d'utiliser le $(this) de jQuery dans l'événement onComplete de Fancybox, mais j'ai des problèmes. Voici mon code javascript:

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

J'ai simplifié le code ci-dessus pour obtenir mon point de, mais je fait l'amour à utiliser $(this) pour plusieurs raisons que je pas ici.

la documentation de Fancybox montre des exemples d'utilisation this au lieu de $(this) au sein de sa documentation, mais je ne vois pas d'exemples où ont été soit utilisés à l'intérieur de onComplete ou d'autres événements. J'ai bien sûr essayé d'utiliser this, beaucoup en vain.

Est-ce que quelqu'un sait comment je peux faire référence à l'élément a.iframe déclenché en utilisant $(this) ou tout autre moyen dans l'événement onComplete?

Edit: Je suis arrivé que cela fonctionne en utilisant la suggestion de » Blackcoat, et voici la syntaxe finale qui a fonctionné:

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

Answer 1

Bitmanic,

Malheureusement, vous êtes hors de la chance en utilisant this, mais vous pouvez toujours référencer le lien actuel. Définissez votre rappel pour accepter un tableau de liens sélectionnés par jQuery comme premier paramètre, et un index comme second paramètre:

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

Voilà comment Fancybox invoque la clapoteuses onComplete:

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

Ils aren » t utiliser Javascript call ou apply pour appeler cette fonction en tant que méthode d'un objet. En d'autres termes, this fera référence à la portée globale de votre application (c'est-à-dire l'objet document), vous ne pouvez donc pas l'utiliser pour vous référer à l'objet sur lequel vous avez agi (dommage pour eux). Au lieu de cela, ils transmettent trois paramètres au rappel pour spécifier le contexte: currentArray (l'objet sélectionné), currentIndex et currentOpts.

Answer 2

Faire quelque chose comme cela devrait fonctionner:

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

En stockant $('a.iframe') dans une variable locale, vous pouvez accéder à l'intérieur de votre fonction de rappel onComplete. Ou, pour 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

J'ai eu aujourd'hui cauchemar avec un problème similaire.Une solution que nous avons trouvé des œuvres:

Lorsque vous appelez le fancybox, définissez une fonction de rappel, par exemple:

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

puis dans la fonction de rappel, utilisez quelque chose comme ceci:

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

Nous avons trouvé que cela fonctionne pour nos exigences en ligne. Nous pouvons utiliser la division pour faire n'importe quel traitement du contenu de fancybox qui a besoin de faire.

Answer 4

avez-vous essayé quelque chose comme ceci:

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

Cela pourrait être votre solution, même si vous devez écrire plus avec moins de commodité.

Answer 5

Voici mon approche - aussi meilleure approche:

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

Vous pouvez voir en action à http://www.giverose.com

Answer 6

Pour ceux qui ont besoin d'obtenir une référence à la cible du lien dans les événements v2.x FancyBox, vous pouvez l'obtenir comme ceci:

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

par exemple

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

$ (this) pointe vers l'objet Fancybox, c'est pourquoi il ne pointe pas vers l'élément. Si vous essayez d'obtenir l'élément cible, vous pouvez faire quelque chose comme ceci:

var $self = $(this.element);