Question

我使用raphael.js创建了一个矩形。 var rect = paper.rect(x,y,width,height);假设x，y，width和height有一些值。我想添加一个鼠标点击处理程序，它会在点击时切换矩形的“填充”颜色。

除了使用'if ... else ...'之外，如何在点击时切换“红色”和“绿色”之间的颜色？在以下函数中将“替换”if ... else ...“的东西：

var colour = 'red';
rect.node.onclick = function(){
    if (colour == 'red') colour = 'green';
    else if (colour == 'green') colour = 'red';
    this.setAttribute("fill",colour);
}

更新：

var fill = 'red';
rect.node.onclick = function(){
    fill  = (fill == 'red') ? 'green': 'red';
    console.log(fill);
    this.setAttribute("fill", fill);
}

我现在可以在控制台上看到我的填充在红色和绿色之间切换。但它不会改变实际矩形的颜色。

Answer 1

怎么样：

rect.node.onclick = function(){
    var currentColor = this.getAttribute('fill');
    var targetColor = (currentColor === 'red') ? 'green' : 'red';
    this.setAttribute("fill", targetColor);
}

即使没有设置填充颜色，这也应该有效。

Answer 2

感觉就像你使用Raphael一样，使用Raphs方法是有意义的，并且避免像Raphaels这样的内部存取器之类的东西，比如node（）。所以你可以把它重写为

rect.click( function() {
    this.attr({ fill: this.attr('fill') == 'green' ? 'red' : 'green' }); 
});

点击时切换raphael对象的颜色

2 个答案: