如何在 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，但无济于事。

有谁知道我如何使用$(this) 或在onComplete 事件中 引用触发的a.iframe 元素？

编辑： 我使用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 处理程序的方式如下：

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

这样做应该可行：

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

通过将$('a.iframe') 存储在局部变量中，您可以在onComplete 回调函数中访问它。或者，put it another way:

...允许访问内部函数 对所有局部变量， 参数和声明的内部 在他们的外部功能 职能）。闭包形成时 这些内部功能之一是 可在函数之外访问 它被包含在内，以便它可以 在外部函数之后执行 已经回来了。在这一点上它仍然 可以访问局部变量， 参数和内部函数 其外部函数的声明。 那些局部变量、参数和 函数声明（最初）有 他们的价值观 外部函数返回，可能是 由内部函数进行交互。

Answer 5

我今天一直在做噩梦，遇到了类似的问题。我们找到了一个可行的解决方案：

调用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 6

对于需要在 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 7

你有没有尝试过这样的事情：

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

这可能是您的解决方案，尽管您必须以更少的便利编写更多内容。