3

我有一个插件，每次单击指定链接时都会打开一个模式。我在插件的 init() 函数中附加了 click 事件，然后运行插件的另一个函数。

但问题是点击时调用的插件函数无法访问插件的其他属性。相反，它似乎是在窗口范围内调用的，而不是插件。

所以在本例中，toggleModal() 无权访问 this.config.container。

如何在点击时触发插件功能，使其保持在插件的范围内？

插件如下：

;(function($, window, document, undefined){

var Modal = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
    this.metadata = this.$elem.data('modal-options');
};

Modal.prototype = {
    defaults: {
        container: '#pageModal'
    },

    init: function() {
        this.config = $.extend({}, this.defaults, this.options, this.metadata);


        this.$elem.bind('click', this.toggleModal);

        if(!$(this.config.container).length) {
            this._build();
        }

        return this;
    },

    toggleModal: function() {
        $(this.config.container).fadeIn();
        return false;
    },

    _build: function() {
        var structure = '<section id="' + this.config.container.replace('#', '') + '"><section class="modalContent"></section></section>';

        $(structure).appendTo($('body')).hide();
    },
}

Modal.defaults = Modal.prototype.defaults;

$.fn.modal = function(options) {
    return this.each(function() {
        new Modal(this, options).init();
    });
};

})(jQuery, window, document);
4

1 回答 1

1

它不是窗口，而是您绑定到的 jQuery 对象（作为 jQuery 所做的产品）。jQuery 包含一个有用的方法$.proxy来解决这个问题：

this.$elem.on('click', $.proxy(this.toggleModal, this));
于 2013-02-18T03:28:39.310 回答