如何跟蹤對Javascript的更改？

Question

我收到的文字是，當您單擊它時，背景色變成綠色，如果再次單擊它，它變成紅色，然后再單擊一次，它又變回白色。 我已經成功鏈接了我的JavaScript，將顏色更改為綠色，但我不知道如何跟蹤對JavaScript的更改以識別出它是綠色，然后再將其更改為紅色。

我所擁有的是這樣的：

<script type="text/javascript">
function change_color($id){

    var link = document.getElementById('link-'+$id);

    var color = link.style.backgroundColor;
    if (color == "green"){
    link.style.backgroundColor="red";
    }if (color == "red"){
    link.style.backgroundColor="white";
    }if (color == "white"){
    link.style.backgroundColor="green";
    }else{
    link.style.backgroundColor="green";
    }

}

</script>

當我運行程序時，僅使用我相信的else語句。 如何激活當前的if語句來跟蹤當前的backgroundColor？

Answer 1

如果顏色是綠色，則將其設置為紅色。 然后，下一個條件檢查紅色（現在為真）並再次更新顏色。

考慮使用switch語句代替if / else語句。

Answer 2

如果要檢查多個條件而僅運行其中一個， else if對於第一個條件之后的所有條件，都需要使用else if ：

if (color == "green"){
    link.style.backgroundColor="red";
}else if (color == "red"){
    link.style.backgroundColor="white";
}else if (color == "white"){
    link.style.backgroundColor="green";
}else{
    link.style.backgroundColor="green";
}

Answer 3

在您的if之間使用if..else if..else或使用switch-case ：

var color = link.style.backgroundColor;
var newColor = "green";
switch (color) {
    case "green":
    {
        newColor="red";
        break;
    }

    case "red":
    {
        newColor="white";
        break;
    }

    case "white":
    {
        newColor = "green";
        break;
    }

    default:
    {
        break;
    }
}

link.style.backgroundColor = newColor;