Raphael：如何添加改变颜色的onclick动作？ [英] Raphael: How to add onclick action that changes colour?

问题描述

基于Raphael演示： http://raphaeljs.com/australia.html 我已经创建了对象那改变他们的颜色。但我需要添加行动onclick会改变它的颜色（橙色）。然后它会保持橙色，直到它再次被点击。

Based on Raphael demo: http://raphaeljs.com/australia.html I have created objects that changes their colour. But I need to add action onclick will change it colour (to orange). And then it will stay orange until it will be clicked again.

我希望这些对象显示选定状态（通过具有不同的颜色）。如果你点击对象，它会改变颜色。如果再次点击它会恢复正常。并再次如果您单击它更改颜色并显示选中。

I want those objects to show selected state (by having different colour). If you click on object it changes colour. If you click again it goes back to normal. And again If you click it changes colour and shows that is selected.

这是我的代码的一部分：

This is part of my code:

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

Onclick会改变颜色，但是当我从对象中取出鼠标后，它会恢复正常并且未被选中。如何将此选定行为添加到此代码中？

Onclick it changes colour but after I take mouse out from object it comes back to normal and is not selected. How can I add this 'selected' behavior to this code?

推荐答案

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

Add another parameter that keeps the selected state.

   st[0].state = 0;

修改：

Modify this:

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

像这样：

Like this:

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

与此：

And this:

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

像这样：

Like this:

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

当然，使用您的颜色......但这是主要想法。

Of course, with your colors... but that's the main idea.

这篇关于Raphael：如何添加改变颜色的onclick动作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！