javascript - 拉斐尔.js : [Onclick] Change color of the clicked element

Question

我在 Raphael.js 中构建了一张美国 map 。现在我希望每次单击某个状态时，它都会以循环方式改变颜色。 像这样:

White State --> Click --> Blue State --> Click --> Red --> Click --> White --> Click --> Blue and so on.

以下代码仅运行一次。就像当状态的填充颜色设置为蓝色时，单击时颜色会更改为红色，但在下一次单击时，它只会保持红色，不会更改为白色。有人有解决办法吗？

for(var i = 0; i< states.length; i++) {
 states[i].click(function() {
  if (this.attr('fill')=='white')
    {this.node.setAttribute('fill', 'blue');}
  else if (this.attr('fill')=='blue')
     {this.node.setAttribute('fill', 'red');}
  else {this.node.setAttribute('fill', 'white');}
});
}

谢谢!

Answer 1

仅供记录，这有效(感谢 Ian):

for(var i = 0; i< states.length; i++) {
states[i].click(function() {
if (this.attr('fill')=='white')
  {this.attr('fill', 'blue');}
else if (this.attr('fill')=='blue')
  {this.attr('fill', 'red');}
else {this.attr('fill', 'white');}
});
}