包含函数参数的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的变量将造成两次混乱。

我单击右眼：将彩色赋给false。 右眼为黑色。 有色会成真。 我单击左眼：当前将彩色赋值为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 color + object； 会弄乱变量的实际值:(

我什至不知道我是否没有考虑真正简单和明显的事情，或者背后是否有真正的窍门。

谢谢你的帮助 ！

Answer 1

与其让全局变量保持有色状态，不如切换为“有色”类。

您可以使用CSS进行所有操作。

如果确实需要使用JavaScript进行操作，则可以检查当前对象是否具有“彩色”类，然后根据该类进行操作。

您还可以考虑将自定义类添加到<a>：

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

然后处理点击：

$('.color-changeable').click(function(){ $(this).toggleClass('colored'); });

Answer 2

我要解决此问题的方法是不使用全局布尔值来存储是否已调整颜色（因为这将仅允许您一次将函数用于一个元素）。

我将在元素本身上存储有色（true / false）状态。

就像是：

function color(id) {
    var element = document.querySelector(id);
    if(element.colored) {
        document.getElementById(id).style = "fill:#0000ff";
        document.getElementById(id).dataset.colored = false;

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

}

上面的代码未经测试，但是应该在正确的方向上为您提供帮助。

有关HTMLElement.dataset的更多信息

Answer 3

在您的情况下，我将为一个对象colored ，以便您可以在其中存储多个值并按名称查找它们：

<script>

var colored = {}; // new object

function color(object) {

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

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

}

</script>

您在帖子中提到，您已经找到了一种使用window进行变量制作的方法。 语法就像

window["colored"+object] = false;

您会注意到，这与为对象colored时使用的语法非常相似。 这是因为JavaScript中的全局变量也是window对象的属性 。