插件总是只获取最后一个实例，如何使其适用于多个元素

Question

在代码中，我试图为 2 个 div 元素调用此插件。但我只能在最后一个实例中看到效果。我看到每个循环中的所有元素，但是当我使用窗口调整大小事件时，我遇到了这个问题。

有人能指出问题所在吗？我正在为这个插件使用 jqueryboilerplate 模板 这是jquery插件代码。只需将其复制粘贴到您的 html 文件中即可。

    // the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

    "use strict";

    // undefined is used here as the undefined global variable in ECMAScript 3 is
    // mutable (ie. it can be changed by someone else). undefined isn't really being
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    // can no longer be modified.

    // window and document are passed through as local variable rather than global
    // as this (slightly) quickens the resolution process and can be more efficiently
    // minified (especially when both are regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = "vf_resizer",
    defaults = {
        propertyName: "value"
    };

    // The actual plugin constructor
    function Plugin ( element, options ) {
        this.element = element;
        this.$element = $( element );
        // jQuery has an extend method which merges the contents of two or
        // more objects, storing the result in the first object. The first object
        // is generally empty as we don't want to alter the default options for
        // future instances of the plugin
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    // Avoid Plugin.prototype conflicts
    $.extend(Plugin.prototype, {
        init: function () {
            // Place initialization logic here
            // You already have access to the DOM element and
            // the options via the instance, e.g. this.element
            // and this.settings
            // you can add more functions like the one below and
            // call them like so: this.yourOtherFunction(this.element, this.settings).
            // console.log(this);
            this.cycle();
        },
        cycle: function () {
            // some logic
            //console.log(this);

            this.resize_calculator();



        },

        resize_calculator : function (){

            self = this

            $(window).resize(function() { 

                console.log(self);
                self.$element.each(function (index, value){
                    console.log(value);
                })


                self.$element.children().each(function (index, value){

                    var $parent_selector = self.$element[0].getBoundingClientRect();

                    var factors = {};
                    var parent = {};
                    var current_dimensions = {};

                    factors.w = $(this).data('w-factor');
                    factors.h = $(this).data('h-factor');

                    factors.posx = $(this).data('posx-factor');
                    factors.posy = $(this).data('posy-factor');


                    parent.width =  $parent_selector.width;
                    parent.height =  $parent_selector.width/2.4;


                    current_dimensions.left = parent.width * factors.posx;        
                    current_dimensions.top = parent.height * factors.posy;        


                    current_dimensions.width = parent.width * factors.w;        
                    current_dimensions.height = parent.height * factors.h;   



                    self.resize_elements(this, current_dimensions, parent);

                })
            });
        },

        resize_elements : function (element, dimensions, parent){
            // console.log(element);
            self = this;
            console.log(self);
            self.$element.css({height: parent.height})       

            $( element ).css({
                position : "absolute",  
                left : dimensions.left,
                top:  dimensions.top,
                height: dimensions.height,
                width: dimensions.width
            });  
        }
    });

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[ pluginName ] = function ( options ) {
        return this.each(function() {
            //console.log($.data);
            if ( !$.data( this, "plugin_" + pluginName ) ) {
               // console.log(this);
                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
            }
        });
    };

})( jQuery, window, document );

这里是html代码。

 <body>

    <style>
        .resizer{ position : relative; border: 1px solid black; width: 100%; height:300px;}
        .deeplink1{position: absolute; top:0; left: 300px; border: 1px solid blue; width: 50%; height: 100px;}
        .deeplink2{position: absolute; top:100px; left: 0; border: 1px solid blue; width: 50%; height: 100px;}
    </style>
    <script>
        $(function() {


            $("#one").vf_resizer();
            $("#two").vf_resizer();

           /* $(".resizer").vf_resizer();*/
        });
    </script>







    <div id="one" class="resizer">
        <div id="drag1" class="deeplink1" data-posx-factor='0.25' data-posy-factor='0' data-h-factor='0.33' data-w-factor='0.5'></div>
        <div id="drag2" class="deeplink2" data-posx-factor='0' data-posy-factor='0.33' data-h-factor='0.33' data-w-factor='0.5'></div>
        <!--<div id="drag3" class="deeplink" data-posx-factor='0.5' data-posy-factor='0.5' data-h-factor='0.1' data-w-factor='0.2'></div>-->
    </div>




    <div id="two" class="resizer">
        <div id="drag3" class="deeplink1" data-posx-factor='0.25' data-posy-factor='0' data-h-factor='0.33' data-w-factor='0.5'></div>
        <div id="drag4" class="deeplink2" data-posx-factor='0' data-posy-factor='0.33' data-h-factor='0.33' data-w-factor='0.5'></div>
        <!--<div id="drag3" class="deeplink" data-posx-factor='0.5' data-posy-factor='0.5' data-h-factor='0.1' data-w-factor='0.2'></div>-->
    </div>



</body>

更新 1：这个插件应该根据窗口大小调整 div resizer 中元素的大小。我已经在数据属性中添加了它们的因子，以便从那里获取它们。

更新 2：这是 JS 小提琴http://jsfiddle.net/DelightedDoD/5he2n2rb/

Answer 1

不确定，但我在插件中发现了一个;，但它似乎不在：

current_dimensions.width = parent.width * factors.w;        
current_dimensions.height = parent.height * factors.h;   

; // <------this one should not have to be here.

self.resize_elements(this, current_dimensions, parent);

我可以看到您的 html 页面上没有 jquery 引用。