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 }); 

}); 

是相当多的清洁剂。