Question

感谢post，这就是我所做的：

var current = null;
for (var state in fr) {
    (function (st, state) {
        st[0].state = 0;
        st[0].onmouseover = function() {
            st[0].style.cursor = "pointer";
            current && fr[current].animate({fill: "#EAEAEA", stroke: "#d5d5d5"}, 300);
            st.animate({fill: "#EC5505", stroke: "#EC5505"}, 300);
            st.toFront();
            paper.safari();
            document.getElementById(state).style.display = "block";
            current = state;
        };

        st[0].onmouseout = function () {
            if (this.state == 0)
                st.animate({ fill: "#EAEAEA", stroke: "#D5D5D5" }, 500);
            else
                st.animate({ fill: "#EC5505", stroke: "#EC5505" }, 500);
            st.toFront();
            paper.safari();
        };

        st[0].onclick = function () {
            st.animate({ fill: "#EC5505", stroke: "#EC5505" }, 500);
            st.toFront();
            if (this.state == 0) {                        
                this.state = 1;
            }
            else
                this.state = 0;
            paper.safari();
        };
    })(fr[state], state);
}

我遇到了一些问题...当我点击一个区域然后将鼠标悬停（在悬停时填写＃EC5505）这个区域，该区域返回#EAEAEA半秒钟然后回到＃EC5505 ...通常，这应该在点击时保持悬停颜色......第二个问题是我想只选择一个区域。因此，当我点击第二个区域时，第一个区域必须返回初始状态。

你可以帮帮我吗？非常感谢

Answer 1

它与你的事件有关...因为你去点击元素时会触发mouseover事件...当你离开mouseout事件时会触发，因此click和mouseout中的动画都会被触发......

对于第二个问题，您必须保留最后点击的元素的引用...以便在单击元素时检查

if(element has already been clicked){
   // go back to original state
}

尝试将布尔值附加到集合[0] ...或当单击设置[0] ....

`var clickedElement = set[0]`

在onclick函数中

if(clickedElement){
// you already have a clicked element so restore its state
}

Raphael如何添加改变最后点击对象颜色的onclick动作

1 个答案: