Fancybox beforeLoad 回调：Javascript、jQuery 和引用 $this？

Question

我不确定如何完成我想做的事情，这在开始时似乎很简单。在将链接的内容调用到fancybox iframe 之前，我想将'visited' 类添加到单击的链接。

只要我停止beforeLoad 通话，Fancybox 就可以正常工作。添加后，页面只是重新加载窗口，绕过 Fancybox。

我不确定我的beforeLoad 函数（这里称为add_visited）是否允许使用jQuery（如addClass），或者我是否需要坚持使用直接的javaScript 功能（element.setAttribute("className", "visited")）。此处粘贴的代码是针对 jQuery 的，引用了 theClicked 中传递的 this。

所以，如您所见，我也不确定如何在函数中引用$(this)。本质上，我想从实际的$.fancybox() 通话中继承this。

并且，为了清楚起见，.clinical_trial_link 是一个应用于锚点的类。在实际代码中是a.clinical_trial_link。

为了更清楚起见，我在这里阅读了一些对话，讨论了这种将链接标记为已访问的方法的相对优点。简单地使用一个类我有一个缺点，但是在一个像这个链接一样重的网站上，查看已经被点击的内容是必不可少的。

最后，有问题的页面位于这里：http://pull4parkinsonsfoundation.org/clinical_trials/

当然，当我继续像带键盘的鲭鱼一样四处乱窜时，js 会与粘贴在这里的内容有所不同。 ;-)

我们将不胜感激，并提前感谢你们在 stackoverflow 上所做的出色工作。这是我多年来第一次真正发布一个问题！

这是我的代码：

function add_visited(theclicked) {
    $(this).addClass('visited');
}

$(document).ready(function() {
    $('.clinical_trial_link').fancybox({
        'beforeLoad': add_visited($this),
        'maxWidth': 1222,
        'maxHeight': 1222,
        'fitToView': true,
        'width': '80%',
        'height': '90%',
        'topRatio': 0.2,
        'autoSize': false,
        'closeClick': false,
        'openEffect': 'elastic',
        'closeEffect': 'elastic'
    });
});

Answer 1

如果您想要将class 添加到绑定到fancybox 的选择器中，请在任何fancybox 回调中使用$(this.element) 引用该元素，例如

$('.clinical_trial_link').fancybox({
  'beforeLoad': function(){
    $(this.element).addClass("visited");
  },
  'maxWidth': 1222,
  // other API options etc
});

Answer 2

当你这样做时：

'beforeLoad': add_visited($(this)),

$(this) 成为函数的参数。所以使用参数——this在函数中没有上下文。

function add_visited(theclicked) {
    $(theclicked).addClass('visited');
}

或者，您也可以这样做：

$('.clinical_trial_link').fancybox({
    'beforeLoad': function(){
        $(this).addClass('visited');
    },

有关this 的更多信息，请参阅this article。

Answer 3

在你的fancybox参数中使用这个：

'beforeLoad': function() { 
     alert('test'); 
},