Question

我正在创建一个jQuery插件，我需要让它响应窗口调整大小事件。我遇到的问题是，如果你只有一个插件实例，它可以正常工作，但如果你只有一个实例，那么只有后者可以工作。我的插件代码看起来像

(function ($) {

    //Define it
    var MyPlugin = function (element, options) {
       //...
    };

    MyPlugin.prototype.init = function() {
        $that = this;
        $(window).bind('resize',function(e) {
            //This only seems to get called for the last instance of the plugin
            $that.recalculate();
        });
    }

    MyPlugin.prototype.recalculate = function() {
    }

    $.fn.myPlugin = function (option) {
        return this.each(function () {
            var $this   = $(this);
            var options = typeof(option) === 'object' ? option : {};
            new MyPlugin(this, options));
        });
    };
}(jQuery));

问题是没有为插件的每个实例调用窗口调整大小事件，所以如果我有两个这样的实例，那么只有div2可以工作。

$('.div1').myPlugin();
$('.div2').myPlugin();

Answer 1

我认为没有办法为每个实例多次执行窗口调整大小。尝试创建一个全局数组来存储实例，并在调整大小时恢复它。

var instances = [] ;

(function ($) {

    //Define it
    var MyPlugin = function (element, options) {
        instances.push(this);
        this.element = element;
        this.init();
    };

    MyPlugin.prototype.init = function() {
        $that = this;
        $(window).bind('resize',function(e) {
            $that.recalculate();
        });
    }

    MyPlugin.prototype.recalculate = function() {
        for(i in instances)
            console.log('recalculate', instances[i].element.html());
    }

    $.fn.myPlugin = function (option) {
        var options = typeof(option) === 'object' ? option : {};
        return new MyPlugin(this, options);
    };
}(jQuery));

$('.div1').myPlugin();
$('.div2').myPlugin();

查看示例https://jsfiddle.net/kbggthb0/5/

Answer 2

尝试使用下面的代码更改您的代码

$.fn.myPlugin = function (option) {
    var options = typeof(option) === 'object' ? option : {};
    return new MyPlugin(this, options);
};

如何将window resize事件绑定到插件实例

2 个答案: