javascript - 循环 javascript get 请求

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 中进行了这个 hack:

$(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" }});
    });
});