在jQuery插件中访问此变量

Question

我正在尝试访问插件中的“ this”变量，但Uncaught ReferenceError: $self is not defined收到错误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();