Question

我正在尝试在Fancybox的$(this)事件中使用jQuery的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元素？

修改我使用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

做这样的事情应该有效：

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

你尝试过这样的事情吗？

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

这可能是您的解决方案，但您必须以较少的便利性写出更多内容。

Answer 7

对于那些需要在Fancybox v2.x事件中获取对链接目标的引用的人，您可以这样做：

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

e.g。

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

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

7 个答案: