0

我正在尝试在 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]);
4

1 回答 1

3

像这样的东西应该工作。这让元素可以根据状态自行设置动画。单击时，如果元素被激活，则循环并停用其他元素。

// 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]));
}
于 2013-03-23T20:26:21.117 回答