jQuery插件多個實例與回調

Question

盡管我已經修補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;
        })()
    }
});





});

的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/這里如何在單個頁面上有多個jQuery插件實例？ 和其他網址

建議是添加：

return this.each(function(){

//code goes here
}

和

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

結果如下： http : //jsfiddle.net/2hs8an8n/6/-但仍然無法正常工作

一位jQuery老手會提供一些有關如何使這項工作有效的見解嗎？

提前致謝。

Answer 1

我終於弄明白了。 事實證明，該插件可以在多個實例上正常工作。 我只是在使用回調函數時遇到了一些嚴重的范圍界定和訪問問題。 我將在此處發布功能代碼，以便其他人可以從中受益。

jsFiddle： http : //jsfiddle.net/2hs8an8n/7/

碼：

(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));