javascript - 所有元素都采用相同的值

Question

我正在尝试为不同的元素分配不同的属性。但每个人都被赋予相同的(最后一个)属性。怎么了？

for (var i = 1; i < 12; i++) {
    d3.select("#id_" + i)
        .text(parseFloat(data[i - 1] / 1000000).toFixed(2))
        .on("mouseover", function (d) {
             d3.select("#tooltip")
                .style("left", "200px")
                .style("top", d3.event.pageY - 30 + "px")
                .select("#info")
                .html("<b>" + keys[i - 2] + "</b>");
             d3.select("#tooltip").classed("hidden", false);
                })
        .on("mouseout", function () {
             d3.select("#tooltip").classed("hidden", true);
    });
}

链接:JSFIDDLE

Answer 1

试试这个:

for (var i = 1; i < 12; i++) {
  (function (i) {  
      d3.select("#id_" + i)
        .text(parseFloat(data[i - 1] / 1000000).toFixed(2))
        .on("mouseover", function (d) {
             d3.select("#tooltip")
                .style("left", "200px")
                .style("top", d3.event.pageY - 30 + "px")
                .select("#info")
            .html("<b>" + keys[i - 2] + "</b>");
             d3.select("#tooltip").classed("hidden", false);
                })
        .on("mouseout", function () {
             d3.select("#tooltip").classed("hidden", true);
        });
  })(i)
}