Raphael.js onclick 이벤트

Question

Raphael.js에서 간단한 버튼을 만들려고합니다. 그래서 나는 마지막 단계에 머물렀다. 여기 내 것이다 JSFiddle 그래서 내 단추를 누르면 단추가 활성 상태를 유지합니다. 하지만 다른 버튼을 누르면 버튼을 눌렀습니다.

나는 루프와 함께 onclick 함수 안에 st.node.state 값을 얻으려고했지만 그것은 단지 나를 위해 작동하지 않습니다. 이 같은

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