0

この投稿のおかげで、私がやったことは次のとおりです。

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 を入力)、この領域は 0.5 秒間 #EAEAEA に戻り、#EC5505 に戻ります... 通常、これはクリックしたときにホバーの色を維持する必要があります... 2番目の問題は、1つの領域のみを選択したいということです。そのため、2 番目の領域をクリックすると、最初の領域が初期状態に戻らなければなりません。

私たちを手伝ってくれますか ？どうもありがとう

4

1 に答える 1

0

イベントと関係があります...要素をクリックするとmouseoverイベントが発生するため... mouseoutイベントを離れると発生し、クリックとマウスアウトの両方のアニメーションが発生します...

2番目の問題については、最後にクリックされた要素の参照を保持する必要があります...要素をクリックしたときにチェックするように

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

ブール値を set[0] にアタッチしてみてください ... または set[0] がクリックされたとき ....

`var clickedElement = set[0]`

onclick 関数内

if(clickedElement){
// you already have a clicked element so restore its state
}
于 2012-08-11T00:31:13.333 に答える