javascript - switch case 直接到 end case

Question

当我运行此代码时，它会贯穿整个切换到最终案例，即使之前的案例之一匹配。我知道这段代码很难看，但在我添加另一个案例之前它可以工作，现在它不起作用。

    function setColours() {
        var operatorName = document.getElementById("operator-header").innerHTML; 
        console.log(operatorName);

        switch(operatorName) {
                case "Great Western Railway":
                    document.getElementById("section2").style.backgroundColor = "darkgreen";
                    document.getElementById("section2").style.color = "white";
                case "c2c":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "purple";
                case "Arriva Trains Wales":
                    document.getElementById("section2").style.backgroundColor = "rgb(0,190,206)";
                    document.getElementById("section2").style.color = "white";
                case "Chiltern Railways":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "rgb(45,106,140)";
                    document.getElementById("horizontal-line").style.borderTop = "1px solid #53c2f0"
                case "CrossCountry":
                    document.getElementById("section2").style.backgroundColor = "rgb(136,0,56)";
                    document.getElementById("section2").style.color = "white";
                case "East Midlands Trains":
                    document.getElementById("section2").style.backgroundColor = "rgb(17,114,195)";
                    document.getElementById("section2").style.color = "rgb(246,198,42)";
                    document.getElementById("horizontal-line").style.border = "1px solid #cc1e05";
                case "Great Western Railway":
                    document.getElementById("section2").style.backgroundColor = "darkgreen";
                    document.getElementById("section2").style.color = "white";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                case "Grand Central":
                    document.getElementById("section2").style.backgroundColor = "black";
                    document.getElementById("section2").style.color = "white";
                    document.getElementById("horizontal-line").style.border = "1px solid #fe8238";
                case "Greater Anglia":
                    document.getElementById("section2").style.backgroundColor = "rgb(204, 204, 204)";
                    document.getElementById("section2").style.color = "rgb(204,33,29)";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                case "Heathrow Express":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "rgb(109,56,122)";
                    document.getElementById("horizontal-line").style.border = "1px solid #d4d4d4";
                case "West Midlands Trains":
                    document.getElementById("section2").style.backgroundColor = "rgb(90,30,79)";
                    document.getElementById("section2").style.color = "rgb(240,140,38)";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                case "London Overground":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "rgb(240,140,38)";
                    document.getElementById("horizontal-line").style.border = "1px solid #1172c3";
                case "Merseyrail":
                    document.getElementById("section2").style.backgroundColor = "rgb(250,203,51)";
                    document.getElementById("section2").style.color = "white";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff"; 

运行时，控制台输出正确的运算符，但仍默认为结束情况

标签： javascripthtmlcss

Answer 1

您需要为每个案例添加，如果没有选择break，也应该有案例。default

在您的代码中，将应用最后一种情况。

function setColours() {
        var operatorName = document.getElementById("operator-header").innerHTML; 
        console.log(operatorName);

        switch(operatorName) {
                case "Great Western Railway":
                    document.getElementById("section2").style.backgroundColor = "darkgreen";
                    document.getElementById("section2").style.color = "white";
                    break;
                case "c2c":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "purple";
                    break;
                case "Arriva Trains Wales":
                    document.getElementById("section2").style.backgroundColor = "rgb(0,190,206)";
                    document.getElementById("section2").style.color = "white";
                    break;
                case "Chiltern Railways":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "rgb(45,106,140)";
                    document.getElementById("horizontal-line").style.borderTop = "1px solid #53c2f0"
                      break;
                case "CrossCountry":
                    document.getElementById("section2").style.backgroundColor = "rgb(136,0,56)";
                    document.getElementById("section2").style.color = "white";
                      break;
                case "East Midlands Trains":
                    document.getElementById("section2").style.backgroundColor = "rgb(17,114,195)";
                    document.getElementById("section2").style.color = "rgb(246,198,42)";
                    document.getElementById("horizontal-line").style.border = "1px solid #cc1e05";
                case "Great Western Railway":
                    document.getElementById("section2").style.backgroundColor = "darkgreen";
                    document.getElementById("section2").style.color = "white";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                case "Grand Central":
                    document.getElementById("section2").style.backgroundColor = "black";
                    document.getElementById("section2").style.color = "white";
                    document.getElementById("horizontal-line").style.border = "1px solid #fe8238";
                case "Greater Anglia":
                    document.getElementById("section2").style.backgroundColor = "rgb(204, 204, 204)";
                    document.getElementById("section2").style.color = "rgb(204,33,29)";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                case "Heathrow Express":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "rgb(109,56,122)";
                    document.getElementById("horizontal-line").style.border = "1px solid #d4d4d4";
                case "West Midlands Trains":
                    document.getElementById("section2").style.backgroundColor = "rgb(90,30,79)";
                    document.getElementById("section2").style.color = "rgb(240,140,38)";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                case "London Overground":
                    document.getElementById("section2").style.backgroundColor = "white";
                    document.getElementById("section2").style.color = "rgb(240,140,38)";
                    document.getElementById("horizontal-line").style.border = "1px solid #1172c3";
                case "Merseyrail":
                    document.getElementById("section2").style.backgroundColor = "rgb(250,203,51)";
                    document.getElementById("section2").style.color = "white";
                    document.getElementById("horizontal-line").style.border = "1px solid #ffffff";
                      break;
                 default:
                    //if no case select