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），您可以使用this引用插件中当前的jQuery实例：

(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在{{1}中将具有不同的值功能。

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

在jquery插件中使用函数中的当前元素

2 个答案: