$ .extend（）.each（）函數，奇怪的行爲？

這是我的插件作爲Highcharts api包裝的結尾。我在each()函數內使用extend()函數將屬性chart.renderTo設置爲當前對象id屬性。

但是這是行不通的。輸出console.log($(this).attr('id'))是正確的，但console.log(opt.chartOptions)只顯示最後一個id（圖表）爲chart.renderTo屬性。

我錯過了什麼$.extend() jQuery功能？

var chartOptions = {}; // Plain option object 

    return this.each(function() { // Each div 

     console.log($(this).attr('id')); // Output: "chart1", "chart2" 
     $.extend(opt.chartOptions, { chart : {renderTo : $(this).attr('id') } }); 
     console.log(opt.chartOptions); // Ops! chart.renderTo is always "chart2" 

     $.ajax({ 
      url : opt.url, 
      type : 'POST', 
      data : opt.data, 
      dataType : 'json', 
      success : function(data) { 
       $.extend(data, opt.chartOptions); // Merge data from server 
       new Highcharts.Chart(data); 
      } 
     }); 

    });

來源

2012-01-10 gremo

我假設opt.chartOptions是一個變量在你的插件功能局部範圍。如果那是真的，那麼你在這裏做的是試圖在包裝環境中爲div中的每一個擴展opt.chartOptions。

每次迭代擴展時（例如$.extend(foo,bar)），jQuery擴展foo的屬性爲bar。我相信你知道這一點。

你可能錯過的是，在你的情況下，bar始終是形式爲{ chart : {} }的對象。長話短說，.each()的每次迭代都覆蓋以前的$.extend()調用。

通過第一次迭代，opts.chartOptions將與opts.chartOptions.chart，這是從第一div在.each()情況下計算進行擴展。

通過第二次迭代，您將嘗試再次使用opts.chartOptions.chart,來擴展opts.chartOptions，它已經有。但jQuery並不在意，所以它會將第二個div的計算值分配給opts.chartOptions.chart中的第一個div的值。

依此類推，等等。

雖然在路上你在這裏使用它，它通常應該沒有關係，它在這裏，因爲你使用的opts.chartOptions在AJAX的回調函數的值。這會在opts.chartOptions上創建一個關閉，這意味着在您的AJAX回調觸發時，其值可能不是您所期望的（因爲它可能已被.each()的另一次迭代修改，等等）。

WHEW !!

來源

2012-01-10 03:16:20

$ .extend（）.each（）函數，奇怪的行爲？

回答

相關問題