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

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

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

Answer 2

如果您想检查多个条件但只运行其中一个，则需要在第一个条件之后的所有条件中使用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..else if..else之间使用if或使用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;

如何跟踪我的Javascript更改？

3 个答案: