Question

我有一个javascript 101问题。

我正在使用一个漂亮的图形库（flot），并在一个页面上绘制多个图形。每个图都是一个div，其属性集告诉图表从哪里获取数据。例如，HTML可能是：

<div class="line-chart" data-src='/revenue.js'></div>
<div class="scatter-chart" data-src='/users/byweek.js'></div>
<div class="scatter-chart2" data-src='/apps/byweek.js'></div>

我在这里有两种类型的图表，分散和线条。理想情况下，我可以遍历类，只需获取适当的数据。但是，我对回调的上下文感到困惑，并且不知道我实际上是哪个div，所以相反我在我的JS中做了这个黑客：

$(document).ready(function() {

    $('.line-chart').each(function() {
        $.getJSON($(this).attr('data-src'),
        function(data) {
            $.plot($('.line-chart'), [data], { xaxis: { mode: "time" }});
        });
    });

    $('.scatter-chart').each(function() {
        $.getJSON($(this).attr('data-src'),
        function(data) {
            $.plot($('.scatter-chart'), [data], { xaxis: { mode: "time" },
                                                  lines: { show: false },
                                                  points: { show: true }
            });
        });
    });

    $('.scatter-chart2').each(function() {
        $.getJSON($(this).attr('data-src'),
        function(data) {
            $.plot($('.scatter-chart2'), [data], { xaxis: { mode: "time" },
                                                  lines: { show: false },
                                                  points: { show: true }
            });
        });
    });
});

我确信我可以清理它，我只是不清楚如何去做。主要问题是$ .plot需要应用于getJSON被称为反对的特定图表，而不是它找到的第一个。

Answer 1

如果您不确定回调的上下文，那么最好不要使用该上下文。您可以改为使用each()循环的上下文：

$('.line-chart').each(function() {
  var self = $(this);
  $.getJSON(self.attr('data-src'),
    function(data) {
        $.plot(self, [data], { xaxis: { mode: "time" }});
    });
});

Answer 2

$(function() {

    function plotChart (selector,options) {
        $(selector).each(function() {
            var $this = $(this);
            $.getJSON($this.attr('data-src'), function (data) {
                $.plot($this, [data], options);
            });
        });
    }

    plotChart('.line-chart', { xaxis: { mode: "time" });

    plotChart('.scatter-chart', { xaxis: { mode: "time" },
                                  lines: { show: false },
                                 points: { show: true });

    plotChart('.scatter-chart2', { xaxis: { mode: "time" },
                                   lines: { show: false },
                                  points: { show: true });

});

相当清洁。

循环javascript获取请求

2 个答案: