包含函數參數的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對象的屬性 。