Làm cách nào để sử dụng $ (this) bên trong sự kiện onComplete của Fancybox?

Question

Tôi đang cố gắng sử dụng jQuery $(this) bên trong sự kiện onComplete của Fancybox, nhưng tôi đang gặp sự cố. Dưới đây là mã javascript của tôi:

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

tôi đã đơn giản hóa các mã trên để có được quan điểm của tôi qua, nhưng tôi thực sự rất thích sử dụng $(this) vì nhiều lý do mà tôi sẽ không đi vào đây.

Tài liệu của Fancybox hiển thị các ví dụ về việc sử dụng this thay vì $(this) trong tài liệu của nó, nhưng tôi không thấy bất kỳ ví dụ nào được sử dụng bên trong onComplete hoặc các sự kiện khác. Tất nhiên tôi đã thử sử dụng this, nhiều để không có kết quả.

Có ai biết làm thế nào tôi có thể tham khảo các kích hoạt a.iframe phần tử bằng cách sử dụng $(this) hoặc bất kỳ phương tiện khác trong sự kiện onComplete?

Edit: Tôi có này để làm việc sử dụng Blackcoat 's gợi ý, và đây là cú pháp cuối cùng mà làm việc:

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

Answer 1

Bitmanic,

Đáng buồn thay, bạn đang trên may mắn sử dụng this, nhưng bạn vẫn có thể tham khảo liên kết hiện tại. Xác định gọi lại bạn để chấp nhận một loạt các liên kết bởi jQuery chọn là tham số đầu tiên của nó, và một chỉ số như tham số thứ hai:

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

Sau đây là cách Fancybox gọi các hander onComplete:

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

Họ aren' t sử dụng Javascript call hoặc apply để gọi hàm này làm phương thức của đối tượng. Nói cách khác, this sẽ tham chiếu đến phạm vi toàn cầu toàn cầu của ứng dụng của bạn (ví dụ: đối tượng document), vì vậy bạn không thể sử dụng nó để tham chiếu lại đối tượng đang bị tác động (xấu hổ với chúng). Thay vào đó, họ chuyển ba tham số cho hàm gọi lại để chỉ định ngữ cảnh: currentArray (đối tượng đã chọn), currentIndex và currentOpts.

Answer 2

Làm một cái gì đó như thế này nên làm việc:

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

Bằng cách lưu trữ $('a.iframe') trong một biến địa phương mà bạn có thể truy cập nó bên trong chức năng onComplete callback của bạn. Hoặc, đến 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

Tôi đã có một cơn ác mộng ngày hôm nay với một vấn đề tương tự.tác phẩm Một giải pháp mà chúng tôi nhận thấy:

Khi gọi Fancybox, thiết lập một chức năng gọi lại, ví dụ:

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

sau đó trong hàm callback, sử dụng một cái gì đó như thế này:

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

chúng tôi đã tìm thấy điều này phù hợp với yêu cầu nội tuyến của chúng tôi. Chúng tôi có thể sử dụng phân chia để thực hiện bất kỳ việc xử lý nội dung fancybox nào cần thực hiện.

Answer 4

bạn đã thử một cái gì đó như thế này:

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

Đây có thể là giải pháp của bạn, mặc dù bạn phải viết more with less tiện lợi.

Answer 5

Đây là cách tiếp cận của tôi - cũng tiếp cận tốt nhất:

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

Bạn có thể nhìn thấy trong hành động ở http://www.giverose.com

Answer 6

Đối với những người cần phải nhận được một tham chiếu đến các mục tiêu liên kết các sự kiện v2.x Fancybox, bạn có thể làm như sau:

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

ví dụ

$('.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) trỏ đến đối tượng Fancybox để tại sao nó không trỏ đến phần tử. Nếu bạn đang cố gắng lấy yếu tố mục tiêu, bạn có thể làm một việc như sau:

var $self = $(this.element);