在jquery插件中使用當前元素的功能

Question

這是我的插件用於繪製谷歌折線圖。

(function($) { 
    $.fn.loadLineChart = function(dataArr, title) { 

     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(function() { drawChart(dataArr, title) }); 

     function drawChart(dataArr, title) { 

      var data = google.visualization.arrayToDataTable(dataArr); 

      var options = { 
       title: title 
      }; 

      var chart = new google.visualization.LineChart($('#chat_div')[0]); 
      chart.draw(data, options); 
     } 
    }; 
})(jQuery); 

我打電話給這個插件如下。

<script type="text/javascript">   
    var data = ''; 
    var title = ''; 

    $('#chart_div').loadLineChart(data, title); 
</script> 

現在我硬編碼插件中的當前元素chart_div。我如何在該函數中使用當前元素？

Answer 1

由於jQuery插件僅僅是一個jQuery.prototype方法（化名爲jQuery.fn），你可以參考jQuery的當前情況下你的插件裏面有this：

(function($) { 
    $.fn.loadLineChart = function(dataArr, title) { 
     var $this = this; 
     //... 
     function drawChart(dataArr, title) { 
      //... 
      var chart = new google.visualization.LineChart($this[0]); 
     } 
    }; 
})(jQuery); 

請注意，在這種情況下，你將需要在loadLineChart方法中存儲對當前值this的引用，因爲this將在drawChart函數中具有不同的值。

Answer 2

在插件中，this將引用插件實例化的元素。因此下面就爲你工作：

(function($) { 
    $.fn.loadLineChart = function(dataArr, title) { 
     var $currentElement = this; 

     // rest of your code... 

     var chart = new google.visualization.LineChart($currentElement[0]); 
    }; 
})(jQuery); 

如果你要調用一個組元素的插件，例如$(".foo").loadLineChart();您將通過各this集合中元素的需要循環。