Javascript 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('&nbsp;');
        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;
        })()
    }
});





});

当然，还有JSFIDLE

单个实例：

多实例

在谷歌搜索之后，我发现了一个允许“多个实例”的常见建议：和这里，以及其他URL

有人建议增加：

return this.each(function(){

//code goes here
}

及

这就产生了：-但仍然不起作用

jQuery的老手会就如何实现这一点提供一些见解吗

---

提前谢谢。

我终于明白了。结果表明，该插件可以很好地处理多个实例。我只是在回调函数中遇到了一些严重的作用域和访问问题。我将在这里发布函数代码，以便其他人可以从中受益

jsFiddle：

代码：

（函数（$）{
$.fn.PercentBar=函数（选项）{
options.redraw=函数（myobj）{
//此函数无权访问类中的任何内容，由setInterval在外部调用
对于（var loopCounter=0；loopCounter

return this.each(function(){

//code goes here
}

$this = $(this); //to save the container object

(function ($) {
        $.fn.PercentBar = function (options) {


            options.redraw = function (myobj) {

                //this function doesn't have access to anything in the class and is called externally by a setInterval
            for (var loopCounter = 0; loopCounter < myobj.bars.length; loopCounter++) {

                var mybar = $(myobj.bars[loopCounter]);                     
                var myindicator = $(mybar).find(".indicator");


                var mylabel = $(mybar).find(".label");

                $(myindicator).animate({ width: myobj.series.data[loopCounter].value * 100 + "%" });
                $(myindicator).addClass(myobj.series.data[loopCounter].css);


                //$(myindicator).attr('style', myobj.series.data[loopCounter].style);

                var myStyle = myobj.series.data[loopCounter].style;


                    for (var key in myStyle) {
                        var attrName = key;
                        var attrValue = myStyle[key];
                        $(myindicator).css(attrName, attrValue);
                    }
                $(mylabel).addClass(myobj.series.data[loopCounter].label.css);
                $(mylabel).html(myobj.series.data[loopCounter].label.label);
                $(mylabel).attr('style', myobj.series.data[loopCounter].label.style);


            }
        }
        return this.each(function(){
            var myreturn = new myfunc($(this),options);

        });


        function myfunc(cont, opts){
            this.container = cont;

            this.bars = [];
            this.settings = $.extend(
                {
                    //this reference is saved for the redraw function.
                    bars:this.bars
            }, opts);                




            for (var loopCounter = 0; loopCounter < this.settings.series.data.length;loopCounter++)
            {

                var bar = document.createElement('div');
                $(bar).addClass(this.settings.basecss);
                var indicator = document.createElement('div');
                $(indicator).addClass('indicator');
                $(indicator).html('&nbsp;');
                var label = document.createElement('div');
                $(label).addClass('label');

                $(bar).append($(label));
                $(bar).append($(indicator));



                $(this.container).append(bar);

                this.bars.push(bar);

            }
            options.redraw(this.settings);
            this.settings.onStart();
        };
    }; // PercentBar
}(jQuery));