Raphael.js: [Onclick] 改变被点击元素的颜色
Raphael.js: [Onclick] Change color of the clicked element
我在 Raphael.js 中制作了一张美国地图。现在我希望每次单击状态时它都会以一种循环的方式改变颜色。
像这样:
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');}
});
}
谢谢!
郑重声明,这有效(感谢 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');}
});
}
我在 Raphael.js 中制作了一张美国地图。现在我希望每次单击状态时它都会以一种循环的方式改变颜色。 像这样:
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');}
});
}
谢谢!
郑重声明,这有效(感谢 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');}
});
}