Доступ к переменной js внутри отдельного обратного вызова (функция)

Question

Я использую скрипт jquery под названием magnific popup, и я пытаюсь получить доступ к переменной, которую я создал в функции обратного вызова, внутри другой функции обратного вызова, но я не могу работать как это сделать. Мой код Magnific инициализации выглядит следующим образом:

$('.packery').magnificPopup({ 
    delegate: '.js-modal', 
    type: 'ajax', 
    mainClass: 'mfp-zoom-in', 
    removalDelay: 500, //delay removal by X to allow out-animation 
    callbacks: { 
     elementParse: function(item) { 
      item.community = item.el.attr('data-community'); 
      var communityClass = item.community; 
      console.log(item.community); 
      // this^does actually print the data-community 
      console.log('Parsing content. Item object that is being parsed:', item); 
     }, 
     resize: function() { 
      console.log('Popup resized'); 
      // resize event triggers only when height is changed or layout forced 

      $('.mfp-bg').addClass(communityClass); 
     } 
    } 
}); 

Если я пытаюсь установить $('.mfp-bg').addClass(communityClass); или $('.mfp-bg').addClass(item.community); я получаю неперехваченный ReferenceError: communityClass не определен.

Я не могу применить класс к mfp-bg внутри elementParse, поскольку этот элемент еще не создан.

Я знаю, что я не могу использовать переменные из разных функций в javascript, но я немного застрял в этом вопросе о том, как я могу фактически использовать атрибут data-community внутри обратного вызова изменения размера, потому что это похоже на I может только создать переменную внутри обратного вызова elementParse?

Любая помощь будет высоко оценена, приветствия.

Answer 1

Вы можете создать глобальную переменную вне функции и присвоить ей item.community. Таким образом, вы сможете получить к нему доступ в другом обратном вызове Aswell

Например:

var communityClass; 
$('.packery').magnificPopup({ 
delegate: '.js-modal', 
type: 'ajax', 
mainClass: 'mfp-zoom-in', 
removalDelay: 500, //delay removal by X to allow out-animation 
callbacks: { 
    elementParse: function(item) { 
     item.community = item.el.attr('data-community'); 
     communityClass = item.community; 
     console.log(item.community); 
     // this^does actually print the data-community 
     console.log('Parsing content. Item object that is being parsed:', item); 
    }, 
    resize: function() { 
     console.log('Popup resized'); 
     // resize event triggers only when height is changed or layout forced 

     $('.mfp-bg').addClass(communityClass); 
    } 
} 
}); 

Answer 2

я понял, что после того, как console.logging это было уже currItem немного я мог бы получить доступ, поэтому я изменил код к этому, и теперь он отлично работает.

$('.packery').magnificPopup({ 
    delegate: '.js-modal', 
    type: 'ajax', 
    mainClass: 'mfp-zoom-in', 
    removalDelay: 500, //delay removal by X to allow out-animation 
    callbacks: { 
     elementParse: function(item) { 
      item.community = item.el.attr('data-community'); 
     }, 
     resize: function() { 
      $('.mfp-bg').addClass(this.currItem.community); 
     } 
    } 
});