1

这是我用于绘制谷歌折线图的插件。

(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 进行硬编码。我如何在该函数中使用当前元素？

4

2 回答 2

3

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

请注意，在这种情况下，您需要在方法中存储对 的当前值的引用this，loadLineChart因为this在函数中会有不同的值drawChart。

于 2012-11-22T10:49:40.337 回答
0

在插件中，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集合中的每个元素。

于 2012-11-22T10:49:31.837 回答