Question

我试图访问＆＃34;这个＆＃34;我的插件中的变量，但我不断收到错误Uncaught ReferenceError: $self is not defined。我真的不明白我做错了什么，这是我第一次尝试以这种方式构建插件。

我已经看过了这种模式下的其他插件，但是我没有看到与他们相比缺少的东西。

代码：

;(function($) {

    $.fn.videoPagination = function(method) {

        // Method calling logic
        if (methods[method] && method.charAt(0) != '_') {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.videoPagination');
        }

    };

    var methods = {

        init: function(options) {
            var o = $.extend({
                per_page: 12,
                current_page: 1,
                src: '/videos.json'
            }, options || {});

            var $self = $(this);
            $self.data('videoPagination', o);

            methods.cover();
            return this;
        },

        cover: function() {
            $self.find('article').each(function(i) {
                var video = $(this);
                setTimeout(function() {
                    video.fadeTo(250, .2);
                }, 50*i);
            });
        }
    };

})(window.jQuery);

$('.videos').videoPagination();

Answer 1

问题不在于您使用this，而在于实际使用$self变量的范围，请参阅我在下面添加的评论：

var methods = {

    init: function(options) {
        var o = $.extend({
            per_page: 12,
            current_page: 1,
            src: '/videos.json'
        }, options || {});

        var $self = $(this); //You are defining the $self variable here inside the scope of the init function
        $self.data('videoPagination', o);

        methods.cover();
        return this;
    },

    cover: function() {
        $self.find('article').each(function(i) { // then trying to use it here inside the scope of the cover function.
            var video = $(this);
            setTimeout(function() {
                video.fadeTo(250, .2);
            }, 50*i);
        });
    }
};

相反，您需要在更大的范围内声明变量，以便您可以在两个位置设置和访问它：

(function($) {

$.fn.videoPagination = function(method) {

    // Method calling logic
    if (methods[method] && method.charAt(0) != '_') {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' +  method + ' does not exist on jQuery.videoPagination');
    }

};

var $self; //notice that $self is now declared outside of both functions.
var methods = {

    init: function(options) {
        var o = $.extend({
            per_page: 12,
            current_page: 1,
            src: '/videos.json'
        }, options || {});

        $self = $(this);
        $self.data('videoPagination', o);

        methods.cover();
        return this;
    },

    cover: function() {
        $self.find('article').each(function(i) {
            var video = $(this);
            setTimeout(function() {
                video.fadeTo(250, .2);
            }, 50*i);
        });
    }
};

})(window.jQuery);

$('.videos').videoPagination();

在jQuery插件中访问此变量

1 个答案: