Как я могу использовать $ (this) внутри события onComplete Fancybox?

Question

Я пытаюсь использовать jQuery's $(this) внутри события Fancybox onComplete, но у меня проблемы. Вот мой код 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 событий?

Edit: я получил эту работу, используя предложение Blackcoat «s, и вот окончательный синтаксис, который работал:

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

Answer 1

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 правша:

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

Они Арен» t используя Javascript's call или apply, чтобы вызвать эту функцию как метод объекта. Другими словами, this будет ссылаться на глобальную область вашего приложения (т. Е. Объект document), поэтому вы не можете использовать его для обращения к объекту, на который действует (позор на них). Вместо этого они передают три параметра для обратного вызова для указания контекста: currentArray (выбранный объект), currentIndex и currentOpts.

Answer 2

Делать что-то, как это должно работать:

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

Сохраняя $('a.iframe') в локальной переменной вы можете получить к нему доступ внутри вашей функции обратного вызова onComplete. Или, к 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

Я приснился кошмар сегодня с подобной проблемой.Решение, которое мы нашли работы:

При вызове 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]; 
} 

мы нашли, что это работает для наших встроенных требований. Мы можем использовать деление, чтобы делать любую обработку содержимого fancybox, которое нужно было делать.

Answer 4

пытались ли вы что-то вроде этого:

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

Это может быть ваше решение, хотя вы должны написать больше с меньшими затратами удобства.

Answer 5

Вот мой подход - также лучший подход:

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

Вы можете увидеть в действии на http://www.giverose.com

Answer 6

Для тех, кому необходимо получить ссылку на целевой линии связи в FancyBox V2.x событий, вы можете получить следующее:

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

eg

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

$ (это) указывает на объект Fancybox, поэтому поэтому он не указывает на элемент. Если вы пытаетесь получить целевой элемент, вы можете сделать что-то вроде этого:

var $self = $(this.element);