Javascript 拉斐尔：如何添加改变颜色的点击动作？

基于拉斐尔的演示：我创建了改变颜色的对象。但我需要添加操作onclick将改变它的颜色（为橙色）。然后它将保持橙色，直到再次单击为止

我希望这些对象显示选定的状态（通过使用不同的颜色）。若你们点击物体，它会改变颜色。如果再次单击，它将恢复正常。再次，如果您单击它，它会改变颜色并显示选定的内容

这是我代码的一部分：

            var current = null;
        for (var state in bodyParts) {
            bodyParts[state].color = Raphael.getColor();
            (function (st, state) {
                st[0].style.cursor = "pointer";
                st[0].onmouseover = function () {
                    current && bodyParts[current].animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500) && (document.getElementById(current).style.display = "");
                    st.animate({ fill: st.color, stroke: "#ccc" }, 500);
                    st.toFront();
                    R.safari();
                    document.getElementById(state).style.display = "block";
                    current = state;
                };
                st[0].onmouseout = function () {
                    st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                    st.toFront();
                    R.safari();
                };
                st[0].onclick = function () {
                    st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                    st.toFront();
                    R.safari();
                };                    
            })(bodyParts[state], state);

---

一旦点击它就会改变颜色，但当我从对象中取出鼠标后，它会恢复正常，并且不会被选中。如何将此“选定”行为添加到此代码中？

添加另一个保持选定状态的参数

   st[0].state = 0;

修改此项：

            st[0].onclick = function () {
                st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

像这样：

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

            st[0].onmouseout = function () {
                if (this.state == 0)
                   st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                else
                   st.animate({ fill: "#f00", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

这是：

            st[0].onmouseout = function () {
                st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

像这样：

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

            st[0].onmouseout = function () {
                if (this.state == 0)
                   st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                else
                   st.animate({ fill: "#f00", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

---

当然，用你的颜色。。。但这就是主要思想。

我正在做一个类似的实现，谢谢！是否有办法在单击元素时将所有其他st[0]。状态设置为false（0）？当然。。。张贴你的代码的一部分，这样我就可以准确地理解你需要什么。如果已经发布，请添加链接（评论或其他）。