javascript - 除了 switch 语句之外的不同写法

标签 javascript

我有以下 switch 语句:

        switch (result.innerHTML) {
            case "":
            case " ":
                result.innerHTML = "Stage1";
                result.style.backgroundColor = "green";
                break;
            case "Stage1":
                result.innerHTML = "Stage2";
                result.style.backgroundColor = "red";
                break;
            case "Stage2":
                result.innerHTML = "Stage3";
                result.style.backgroundColor = "yellow";
                break;
            case "Stage3":
                result.innerHTML = "Stage4";
                result.style.backgroundColor = "pink";
                break;
            case "Stage4": //start over
                result.innerHTML = "";
                result.style.backgroundColor = "";
                break;
            default:
        }

在 JavaScript 中是否有另一种简洁的方法来做到这一点?也许使用数组或 JavaScript 对象?

最佳答案

我喜欢这个开关。它易于阅读和理解。有时更短的代码并不总是更好的代码。

这是一个替代方案。

var states  {
    "":         ["Stage1","green"],
    " ":   ["Stage1","green"],
    "Stage1":   ["Stage2","red"],
    "Stage2":   ["Stage3","yellow"],
    "Stage3":   ["Stage4","pink"],
    "Stage4":   ["",""]
};
if(result.innerHTML in stages)
{
    result.style.backgroundColor = stages[result.innerHTML][1];
    result.innerHTML = stages[result.innerHTML][0];
}

关于javascript - 除了 switch 语句之外的不同写法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18167377/

相关文章:

javascript - 通过 vanilla Javascript 阅读参数

javascript - Kendo UI Validator - 处理具有相同名称属性的输入

javascript - 一次应用多个翻译?

Javascript - 将日期字符串重新格式化为 ISO8601

javascript - 为什么运行时类型检查在 ts 中如此重要?

javascript - 如何使用 jQuery 更新文本区域内的代码

innerHTML 中 Laravel 的 @if 内的 Javascript 变量

php - 将数据保存到 MySQL 并使用该数据更新页面而无需刷新

javascript - jQuery - 为什么委托(delegate)传播,即使在调用 `e.preventDefault` 之后?

javascript - d3.js : attribute setting not working after binding data and entering elements