Обратный вызов Fancybox beforeLoad: Javascript, jQuery и ссылка на $this?

Я не уверен, как выполнить то, что я хочу сделать, что вначале казалось простым. Я хочу добавить класс 'visited' к ссылке, по которой щелкнули, перед вызовом связанного содержимого в iframe fancybox.

Fancybox работает нормально, пока я отключаю вызов beforeLoad. При добавлении страница просто перезагружает окно, минуя Fancybox.

Я не уверен, разрешено ли моей функции beforeLoad (здесь она называется add_visited) использовать jQuery (как в addClass) или мне нужно придерживаться прямой функциональности javaScript (element.setAttribute("className", "visited")). Вставленный здесь код предназначен для jQuery со ссылкой на переданный this в theClicked.

Так что, как видите, я тоже не знаю, как обращаться к $(this) в функции. По сути, я хочу перенести this из фактического вызова $.fancybox().

И, для ясности, .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'
    });
});

person dashard    schedule 14.08.2012    source источник


Ответы (3)


Если вы хотите добавить class к селектору, связанному с fancybox, обратитесь к этому элементу, используя $(this.element) в любом из обратных вызовов fancybox, например

$('.clinical_trial_link').fancybox({
  'beforeLoad': function(){
    $(this.element).addClass("visited");
  },
  'maxWidth': 1222,
  // other API options etc
});
person JFK    schedule 14.08.2012
comment
Превосходно! Вот и все. При добавлении .element к this я увидел, что класс действительно добавлен, но цвет моей ссылки не изменился. Повышение специфичности CSS исправило это. Большое спасибо! - person dashard; 14.08.2012

Когда вы сделали это:

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

$(this) стал параметром функции. Поэтому используйте параметр -- this не имеет контекста в функции.

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

Или, в качестве альтернативы, вы можете сделать это вместо этого:

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

Дополнительную информацию о this см. в этой статье.

person wanovak    schedule 14.08.2012
comment
Спасибо за быстрый ответ, но обе версии не работают как в Chrome, так и в FF (Mac, текущие версии). Я пробовал все это, разбираясь в своих различных попытках. Чтобы было ясно, класс не добавляется (просматривается окончательный исходный код), а ссылка действует так, как описано изначально: обход Fancybox и перезагрузка сайта в браузере. - person dashard; 14.08.2012
comment
Ооо, я пропустил твою опечатку. Это $(this), а не $this. Передайте первое в качестве параметра вместо второго. Если это не сработает, просто попробуйте this. - person wanovak; 14.08.2012
comment
Я изменил код на следующий (актуальный код только здесь): function add_visited(theclicked) { $(theclicked).addClass('visited'); } $(document).ready(function() { $('.clinical_trial_link').fancybox({ 'beforeLoad': add_visited(), // оставшийся код параметра... И ссылка открывается в Fancybox, но из конечно, нет visited класса. - person dashard; 14.08.2012
comment
Измените это add_visited() на add_visited(this) - person wanovak; 14.08.2012
comment
Неа. ;-) Ссылка открывается в Fancybox, но класс не добавляется. Этот код гласит: function add_visited(theclicked) { $(theclicked).addClass('visited'); } ` $(document).ready(function() { $('.clinical_trial_link').fancybox({ 'beforeLoad': add_visited(this),` - person dashard; 14.08.2012
comment
Я пробовал add_visited(this), add_visited($(this)) и add_visited($this). - person dashard; 14.08.2012
comment
Можете ли вы создать jsfiddle? Вы можете добавить свой URL-адрес fancybox.js через дополнительные ресурсы. - person wanovak; 14.08.2012
comment
Мне кажется, взаимодействие будет слишком сложным, но вот одно: jsfiddle.net/eVuN8. моя первая скрипка, дайте мне знать, если что-то нужно сделать по-другому. Вставил ВСЕ css и ВСЕ js, так как ясно, что нужно, гм, возиться. - person dashard; 14.08.2012

Используйте это в ваших параметрах fancybox:

'beforeLoad': function() { 
     alert('test'); 
},
person Ankit Sewadik    schedule 20.11.2018