包含函数参数的 Javascript 变量名

Question

我一直在搜索这个问题，找到了一些关于解决它的方法，使用 eval() 和 window[] 但无法找到好的语法。

这是我的代码:

<script>

var colored = false;

function color(object) {

    if(colored) {
        document.getElementById(object).style = "fill:#0000ff";
        colored = false;

    } else {
        document.getElementById(object).style = "fill:#000000";
        colored = true;
    }

}

</script>

此代码是关于通过单击链接为 svg 路径(代表一只眼睛)着色，然后再次单击同一链接返回原始颜色。

<a id="o1-right" onclick="color('right-orbit')" href="#">

此代码适用于一次为单个元素着色。

但是如果我想将它用于第二个链接，例如:

<a id="o1-left" onclick="color('left-orbit')" href="#">

然后名为 colored 的变量将被使用两次。

我点击右眼: 彩色被分配给假。 右眼是黑色的。 有色必成真。 我点击左眼: Colored 当前分配给 true。 左眼会变蓝。 有色会变假。

我希望左眼变成黑色。

问题出在左眼链接和右眼链接使用的变量上。

我正在寻找一种根据对象动态命名变量的解决方案。在我看来，这看起来像这样:

<script>

function color(object) {

var colored + object;

    if(colored + object) {
        document.getElementById(object).style = "fill:#0000ff";
        colored + object = false;

    } else {
        document.getElementById(object).style = "fill:#000000";
        colored + object = true;
    }

}

</script>

但我知道这是完全错误的，因为语法看起来很糟糕，而且在每种情况下都声明了 var colored + object;会弄乱变量的实际值:(

我什至不知道我是不是在考虑一些非常简单明了的事情，或者它背后是否真的有诀窍。

谢谢你的帮助!

Answer 1

与其让全局变量保存彩色状态，不如考虑切换类“彩色”。

你可以用 css 做任何事情。

如果你真的必须在 JavaScript 中这样做，那么你可以检查你当前的对象是否有类 'colored' 然后根据它进行。

您还可以考虑向您的 添加自定义类:

a.color-changeable.colored{fill:#000} a.color-changeable {fill:#0000ff}

然后处理点击:

$('.color-changeable').click(函数(){ $(this).toggleClass('彩色'); });