Fancybox beforeLoad 回调:Javascript、jQuery 和引用 $this? [英] Fancybox beforeLoad Callback: Javascript, jQuery and referencing $this?

问题描述

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

I'm not sure how to accomplish what I'm looking to do, which, on starting out, seemed simple. I want to add a 'visited' class to a clicked link before calling the linked content into a fancybox iframe.

Fancybox 工作正常，只要我不使用 beforeLoad 调用.添加后，页面只需重新加载窗口，绕过 Fancybox.

Fancybox works fine, as long as I leave off the beforeLoad call. When added, the page simply reloads the window, bypassing the Fancybox.

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

I'm not sure whether my beforeLoad function (here called add_visited) is allowed to use jQuery (as in addClass), or whether I need to stick to straight javaScript functionality (element.setAttribute("className", "visited")). The code pasted here is for jQuery, with a reference to a passed this in theClicked.

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

So, as you can see, I'm also not sure how to refer to $(this) in the function. Essentially I want to carry over this from the actual $.fancybox() call.

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

And, for clarity, .clinical_trial_link is a class applied to an anchor. In the actual code it's a.clinical_trial_link.

为了更清楚，我在这里阅读了一些讨论，讨论了这种将链接标记为已访问的方法的相对优点.我得到了简单使用类的缺点，但在像这个链接这样大量链接的网站上，必须查看已点击的内容.

For further clarity, I've read a few conversations here discussing the relative merits of this method of marking links as visited. I get the downside to simply using a class, but on a site as link heavy as this one, seeing what's been clicked already is imperative.

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

Finally, the page in question is located here: http://pull4parkinsonsfoundation.org/clinical_trials/

当然，当我继续像带键盘的鲭鱼一样四处奔波时，js 会从这里粘贴的内容发生变化.;-)

The js, of course, will change from what's pasted here as I continue to thrash around like a mackeral with a keyboard. ;-)

感谢您提供任何帮助，并提前感谢你们在 stackoverflow 上所做的出色工作.这是多年来我第一次不得不发布一个问题！

Any help would be appreciated, and thanks in advance for the excellent work you all do on stackoverflow. This is the first time I've actually had to post a question in years!

这是我的代码:

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

推荐答案

如果你想做的是在绑定到fancybox的选择器中添加一个class，使用引用那个元素$(this.element) 在任何fancybox 回调中，例如

If what you want to do is to add a class to the selector bound to fancybox, refer to that element using $(this.element) within any of the fancybox callbacks like

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

这篇关于Fancybox beforeLoad 回调:Javascript、jQuery 和引用 $this?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！