如何在Fancybox的onComplete事件中使用$（this）？

Question

我正試圖在Fancybox的onComplete事件中使用jQuery的$(this) ，但是我遇到了麻煩。 這是我的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事件？

編輯：我使用Blackcoat的建議讓這個工作，這里有最終的語法：

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

Answer 1

$（this）指向Fancybox對象，這就是為什么它不指向元素。 如果您正在嘗試獲取目標元素，則可以執行以下操作：

var $self = $(this.element);

Answer 2

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 hander：

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

他們沒有使用Javascript的call或者apply調用此函數作為對象的方法。 換句話說， this將引用應用程序的全局范圍 （即document對象），因此您不能使用它來引用正在執行的對象（對它們感到羞恥）。 相反，它們將三個參數傳遞給回調以指定上下文： currentArray （所選對象）， currentIndex和currentOpts 。

Answer 3

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

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

您可以在http://www.giverose.com上查看

Answer 4

對於那些需要在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                  
   }
});

Answer 5

做這樣的事情應該有效：

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

通過在局部變量中存儲$('a.iframe') ，您可以在onComplete回調函數中訪問它。 或者， 換句話說 ：

...允許內部函數訪問其外部函數中的所有局部變量，參數和聲明的內部函數。 當其中一個內部函數在包含它的函數之外可訪問時形成閉包，從而可以在外部函數返回之后執行閉包。 此時它仍然可以訪問其外部函數的局部變量，參數和內部函數聲明。 那些局部變量，參數和函數聲明（最初）具有外部函數返回時的值，並且可以通過內部函數進行交互。

Answer 6

我今天一直在做類似問題的噩夢。 我們發現的解決方案有效：

調用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內容。

Answer 7

你嘗試過這樣的事情：

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

這可能是您的解決方案，盡管您必須以更少的便利性編寫更多內容。