單擊時切換拉斐爾對象的顏色

Question

我使用raphael.js創建了一個矩形。 var rect = paper.rect(x,y,width,height); 假設x，y，寬度和高度具有一些值。 我想添加一個鼠標單擊處理程序，它將在單擊時切換矩形的“填充”顏色。

除了使用“ 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' }); 
});