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

Я пытаюсь использовать jQuery $(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 , и вот последний синтаксис, который работал:

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

Ответы [ 7 ]

24 голосов
/ 02 октября 2012

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

var $self = $(this.element);
15 голосов
/ 13 октября 2010

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);
}

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

5 голосов
/ 25 февраля 2012

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

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

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

0 голосов
/ 06 июня 2012

Для тех, кому нужно получить ссылку на цель ссылки в событиях 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                  
   }
});
0 голосов
/ 01 января 2011

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

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

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

0 голосов
/ 22 декабря 2010

У меня сегодня был кошмар с похожей проблемой.Найденное нами решение работает:

При вызове 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, которое нужно было выполнить.

0 голосов
/ 13 октября 2010

Выполнение чего-то подобного должно работать:

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

Сохраняя $('a.iframe') в локальной переменной, вы можете получить к ней доступ через функцию обратного вызова onComplete. Или , иначе говоря :

... доступ к внутренним функциям разрешен для всех локальных переменных, параметры и объявленные внутренние функции в их внешнем Функция (ы). Закрытие образуется, когда одна из этих внутренних функций выполнена доступны вне функции в который он содержал, чтобы он мог исполняться после внешней функции вернулся. На каком этапе это все еще имеет доступ к локальным переменным, параметры и внутренняя функция объявления его внешней функции. Эти локальные переменные, параметр и объявления функций (изначально) имеют ценности, которые они имели, когда внешняя функция возвращена и может быть взаимодействует с внутренней функцией.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...