在单独的回调（函数）中访问 js 变量

Question

我正在使用一个名为 magnific popup 的 jquery 脚本，我正在尝试访问我在回调函数中创建的变量，在另一个回调函数中，但我不知道该怎么做.我的 magnific init 代码如下所示：

$('.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);，我会得到一个 Uncaught ReferenceError: communityClass is not defined。

我无法在 elementParse 中将 class 应用于 mfp-bg，因为该元素尚未创建。

我知道我不能在 javascript 中使用来自不同函数的变量，但此时我对如何在调整大小回调中实际使用 data-community 属性有点困惑，因为似乎我只能在 elementParse 回调中创建变量？

任何帮助将不胜感激，干杯。

Answer 1

您可以在函数外部创建一个全局变量并将 item.community 赋值给它。这样你也可以在另一个回调中访问它

例如：

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

在单独的回调（函数）中访问 js 变量

Accessing js variable inside a separate callback (function)

javascript

jquery

magnific-popup