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])); 
}