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

Raphael.js onclick事件

1 个答案: