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

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

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

  });

var-map=Raphael（'canvas'，500500）；
var coords=[[150,50]，[20,85]，[350,95]；
var圈；
对于（变量i=0；i

---

但是悬停函数只在最后创建的对象上运行！如何解决此问题？

可能悬停事件绑定应该位于for循环内。这样，每个对象在创建后都会被绑定。。在转到下一个之前

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

  });
}

var-map=Raphael（'canvas'，500500）；
var coords=[[150,50]，[20,85]，[350,95]；
var圈；
对于（变量i=0；i

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

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

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

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

var-map=Raphael（'canvas'，500500）；
var coords=[[150,50]，[20,85]，[350,95]；
对于（变量i=0；i

---

此解决方案无法按原样工作，但只需对悬停处理程序中的circle.animate（）调用进行一点修改，即可对This.animate（）进行操作，因为函数将知道要为哪个正确的元素设置动画。这可能是我的另一个解决方案的前提。如果你对答案稍加修改，我就投赞成票。