插件总是只得到最后一个实例,如何让它适用于多个元素

Plugin always only gets last instance, how to make it work for multiple elements

本文关键字:适用于 元素 实例 最后一个 插件      更新时间:2023-09-26

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

有人可以指出问题是什么吗?我正在为此插件使用 jquery样板模板这是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 调整器中的元素大小。我在数据属性中添加了它们的因素,以便从那里获取它们。

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

不确定,但在插件中,我在一个似乎没有的地方发现了一个;

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引用。

相关文章: