javascript - 如何跟踪对我的 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 语句。如何跟踪当前的 backgroundColor 以激活上述 if 语句？

Answer 1

如果要检查多个条件但只运行其中一个else if条件，则需要在第一个条件之后使用for 所有条件：

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 2

如果颜色为绿色，则将其设置为红色。然后下一个条件检查红色（现在为真）并再次更新颜色。

考虑使用switch语句而不是if/else语句。

Answer 3

if..else if..else在您if的 's 之间使用或使用 a代替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;