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="#">

然后名为coloured的变量将导致使用两次。

我点击右眼：彩色被指定为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着色+对象;会搞乱变量的实际值:(

我甚至不知道我是不是在考虑一些非常容易和明显的事情，或者背后是否有真正的伎俩。

谢谢你的帮助！

Answer 1

不要让全局变量保持着色状态，而是考虑切换“有色”类。

你可以用css做任何事情。

如果您真的必须在JavaScript中执行此操作，那么您可以检查当前对象是否具有“彩色”类，然后根据它继续。

您还可以考虑将自定义类添加到＆lt; a＆gt; ：

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

然后处理点击：

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

Answer 2

我解决这个问题的方法是不使用全局布尔来存储颜色是否已被调整（因为这样只允许你一次使用一个元素的函数）。

我会在元素本身上存储有色（真/假）的状态。

类似的东西：

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作为对象时使用的语法非常相似。这是因为global variables in JavaScript are also properties on the window object。

包含函数参数

3 个答案: