javascript - 悬停函数不适用于数组中的 Rapael.js 对象

Question

使用 Raphael.js 2.1.0，我尝试使用以下代码从坐标数组在 Canvas 上创建圆形对象:

var map = Raphael('canvas', 500, 500);
var coords = [ [150,50], [20,85], [350,95] ];
var circle;
for(var i = 0; i < coords.length; i++){
  circle = map.circle(coords[i][0], coords[i][1], 20);
  circle.toFront();
  circle.attr({
      fill: '#98ED00',
      translation: "4,4",
      stroke: '#FFF',
      'stroke-width': 4,
      opacity: 1,
  });
}

  circle.hover(
  function () {
      circle.animate({
          fill: 'red',
          opacity: 1,
          map: 30,
              'stroke-width': 4
      }, 300);
  }, function () {
      circle.animate({
           fill: '#98ED00',
          opacity: 1,
              'stroke-width': 4,
          map: 20
      }, 300);

  });

但是悬停功能仅在最后创建的对象上起作用!我该如何解决这个问题？

Answer 1

问题是，当您调用“circle.glow()”时，您引用的是哪个圆，因为您有 3 个圆？

循环变量每次都会被覆盖，因此处理程序只会附加到最后一个。

为了解决这个问题，有几种不同的方法。您可以为圆圈创建一个数组，并向每个圆圈添加一个悬停处理程序。或者您可以创建一个闭包，如下例所示。这取决于您稍后是否需要对其执行任何可能影响解决方案的操作...

var map = Raphael('canvas', 500, 500);
var coords = [ [150,50], [20,85], [350,95] ];

for(var i = 0; i < coords.length; i++){
    (function() {
      var circle;
      circle = map.circle(coords[i][0], coords[i][1], 20);
      circle.toFront();
      circle.attr({
         fill: '#98ED00',
          translation: "4,4",
          stroke: '#FFF',
         'stroke-width': 4,
         opacity: 1,
     });
     circle.hover(
       function () {
         circle.animate({
              fill: 'red',
              opacity: 1,
              map: 30,
              'stroke-width': 4
          }, 300)
         }, function () {
           circle.animate({
               fill: '#98ED00',
               opacity: 1,
              'stroke-width': 4,
              map: 20
          }, 300)
         }    );
    })();
};

http://jsfiddle.net/HVh9E/2/