插件总是只得到最后一个实例,如何让它适用于多个元素
Plugin always only gets last instance, how to make it work for multiple elements
在代码中,我试图为 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引用。
相关文章:
- 制作 JavaScript 代码适用于任何元素
- 在调整大小和加载时移动 DOM 元素.仅适用于调整大小
- 插件总是只得到最后一个实例,如何让它适用于多个元素
- 我想放一个JS函数,它适用于列表的所有元素,但我可以't将其复制到每个元素中
- JQuery验证仅适用于提交的表单中的第一个元素.[打算验证所有内容]
- 为什么 .data() 适用于一组元素,但不适用于单个元素
- 如何让我的 jQuery 代码适用于所有元素
- 绑定函数仅适用于最后一个元素
- jQuery ID 选择器仅适用于第一个元素
- document.getElementById 适用于一个表单元素,但不适用于另一个表单元素
- 弹出模式仅适用于表格中的第一个元素,第二次单击后不会再次打开
- 代码仅适用于找到的第一个元素,存在多个具有相同 id 的元素
- jQuery.data() 仅适用于附加的元素
- javascript函数只适用于第一个元素
- 在backbonejs视图中,keypress/keyup/keydown事件是否仅适用于输入,而不适用于其他元素
- JQuery fadeOut仅适用于第一个元素
- JS函数只适用于一个(第一个)元素
- aria-expanded和aria-haspopup属性是否适用于元素
- jQuery . addclass()和. removeclass()只适用于元素的第一个实例
- 原型集属性是否适用于元素类选择器