jquery plugin несколько экземпляров с обратным вызовом

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/

Через некоторое Googling, я нашел общий предложение, чтобы позволить "несколько экземпляров" здесь: 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? и другие URLs

предложение было добавить:

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