1

我有以下 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 对象？

4

3 回答 3

3

您应该将背景颜色放入具有不同类（ 、 等）的 CSS 中stage1，stage2并将当前阶段存储为单独的变量。

var currentStage = 0;

function proceed() {
    currentStage = (currentStage + 1) % 5;
    result.innerHTML = currentStage === 0 ? '' : 'Stage' + currentStage;
    result.className = 'stage' + currentStage;
}

它将在未来产生更清晰的代码。

于 2013-08-10T23:56:15.777 回答
3

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

这是一个替代方案。

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];
}
于 2013-08-10T23:49:12.270 回答
0

有 (if,else if 和 else) 语句，但 switch 语句比它们干净得多。

于 2013-08-10T23:48:26.997 回答