Raphael.js onclick事件

Question

我想在Raphael.js上做一些簡單的按鈕。 所以我陷入了最後一步。 這是我的JSFiddle 所以我的按鈕保持活動狀態後，你按下它們。 但我試圖按下按鈕 不活動，當我按另一個。

我試圖讓st.node.state的值與onclick函數內的循環 但它只是不適合我。 這裏是我的代碼：

for(var i in aus) { 

    (function (st) { 

     st.node.state = 0; 



     st.node.onmouseover = function() { 
      st.animate({fill: "#8fbf27", stroke: "#fff"}, 100); 
     }; 
     st.node.onmouseout = function() { 
      st.animate({fill: "#555", stroke: "#fff"}, 100); 
      if(this.state == 1){ 
       st.animate({fill: "#fff", stroke: "#fff"}, 100); 
      }else { 
       st.animate({fill: "#555", stroke: "#fff"}, 100); 
      } 
     }; 
     st.node.onclick = function() { 

      if(this.state == 0) { 
       this.state = 1; 
       st.animate({fill: "#fff", stroke: "#fff"}, 100); 
      }else { 
       this.state = 0; 
       st.animate({fill: "#555", stroke: "#fff"}, 100); 
      } 

     }; 

    })(aus[i]); 

Answer 1

這樣的事情應該工作。這可以讓元素根據狀態進行動畫。點擊時，如果元素被激活，則循環並禁用其他元素。

// An animator function which will animate based on node state 
var animate = function(st) { 
    var fill = st.node.state ? "#fff" : "#555"; 
    st.animate({fill: fill, stroke: "#fff"}, 100); 
} 

for (i in aus) { 
    (function (st) { 
    st.node.state = 0; 
    st.node.onmouseover = function() { 
     if (!this.state) st.animate({fill: "#8fbf27", stroke: "#fff"}, 100); 
    }; 
    st.node.onmouseout = function() { 
     animate(st); 
    }; 
    st.node.onclick = function() { 
     this.state = 1 - this.state; 
     animate(st); 
     // if the node is deactivated stop now 
     if (!this.state) return; 
     // otherwise deactivate and animate the other nodes 
     for (i in aus) { 
     // if node is `this` or node is already deactivated, continue 
     if (aus[i].node === this || !aus[i].node.state) continue; 
     // otherwise deactivate and animate 
     aus[i].node.state = 0; 
     animate(aus[i]); 
     } 
    }; 
    }(aus[i])); 
} 

或者，如果一次只激活一個，則可能只存儲對一個激活節點的引用並避免循環。

// A reference to the active element 
var activeEl; 

// animate based on whether the st is the active element 
var animate = function(st) { 
    var fill = activeEl === st ? "#fff" : "#555"; 
    st.animate({fill: fill, stroke: "#fff"}, 100); 
} 

for (i in aus) { 
    (function (st) { 
    st.node.onmouseover = function() { 
     if (!this.state) st.animate({fill: "#8fbf27", stroke: "#fff"}, 100); 
    }; 
    st.node.onmouseout = function() { 
     animate(st); 
    }; 
    st.node.onclick = function() { 
     if (!activeEl || activeEl !== st) { 
     var el = activeEl; 
     activeEl = st; 
     if (el) animate(el); 
     } else { 
     activeEl = null; 
     } 
     animate(st); 
    }; 
    }(aus[i])); 
}