虽然我一直在修补jQuery一段时间,但这是我第一次编写一个插件。我在一段时间内绘制水平百分比和更新。原型运行良好。但是,当我去实例化第二个实例时,它发生故障。看起来间隔时间点仍然会触发,但是一切都应用于第二个实例。jquery插件带回调的多个实例
下面是html代码: 和JavaScript:
(function ($) {
$.fn.PercentBar = function (options) {
options.redraw = function() {
console.log(settings.label);
redraw()
}
var settings = $.extend({
// default settings
basecss: 'PercentBar',
label: 'test',
onStart: function() {
console.log("started");
},
series: {
data: (function() {
// generate an array of random data
var data = []
for (var i = 0; i < 20; i++) {
var myrandom = Math.random();
data.push({
style: 'background-color:#ff0000;',
label: {
label: 'label ' + i + "-" + myrandom,
style: '{color:#fff;}',
css: 'LabelCSS'
},
value: myrandom
});
}
return data;
})()
}
}, options);
var bars = [];
var redraw = function() {
//console.log("redrawing " + settings.label);
for (var loopCounter = 0; loopCounter < bars.length; loopCounter++) {
var mybar = $(bars[loopCounter]);
var myindicator = $(mybar).find(".indicator");
var mylabel = $(mybar).find(".label");
$(myindicator).animate({
width: settings.series.data[loopCounter].value * 100 + "%"
});
$(myindicator).addClass(settings.series.data[loopCounter].css);
$(myindicator).attr('style', settings.series.data[loopCounter].style);
$(mylabel).addClass(settings.series.data[loopCounter].label.css);
$(mylabel).html(settings.series.data[loopCounter].label.label);
$(mylabel).attr('style', settings.series.data[loopCounter].label.style);
}
}
for (var loopCounter = 0; loopCounter < settings.series.data.length; loopCounter++) {
var bar = document.createElement('div');
$(bar).addClass(settings.basecss);
var indicator = document.createElement('div');
$(indicator).addClass('indicator');
$(indicator).html(' ');
var label = document.createElement('div');
$(label).addClass('label');
$(bar).append($(label));
$(bar).append($(indicator));
$(this).append(bar);
bars.push(bar);
}
options.redraw();
settings.onStart();
}; // PercentBar
}(jQuery));
//autorun
$(document).ready(function() {
$('.chart').PercentBar({
label: 'bars1',
onStart: function() {
myObject = this;
console.log((myObject));
setInterval(function() {
myObject.series = {
data: (function() {
// generate an array of random data
var data = []
for (var i = 0; i < 10; i++) {
var myrandom = Math.random() * 0.5; //limit this to lower than 50%
data.push({
style: 'background-color:#336699;',
label: {
label: 'label ' + i + "-" + myrandom,
style: 'color:#fff;',
css: 'LabelCSS'
},
value: myrandom
});
}
return data;
})()
}
myObject.redraw();
}, 1000);
},
series: {
data: (function() {
// generate an array of random data
var data = []
for (var i = 0; i < 10; i++) {
data.push({
style: 'width:0;background-color:#336699;',
label: {
label: 'label ' + i + "-" + 0,
style: 'color:#fff;',
css: 'LabelCSS'
},
value: 0
});
}
return data;
})()
}
});
});
的CSS
.PercentBar {
position:relative;
padding:1px;
max-width:100%;
}
.LabelCSS {
position:absolute;
max-width:100%;
}
,当然,在的jsfiddle
单个实例: http://jsfiddle.net/2hs8an8n/4/个
多个实例 http://jsfiddle.net/2hs8an8n/5/
一些谷歌搜索后,我发现了一个共同的建议,让“多实例”在这里:https://css-tricks.com/forums/topic/multiple-instances-of-jquery-plugin-on-one-page/这里How to have multiple instances of jQuery plugin on single page?,以及其他URL
建议是,增添:
return this.each(function(){
//code goes here
}
and
$this = $(this); //to save the container object
其产生这样的:http://jsfiddle.net/2hs8an8n/6/ - 但仍然无法正常工作
会jQuery的老将提供关于如何使这项工作的一些见解?
在此先感谢。