将 if 语句转换为 switch 语句

Question

我需要将函数中的 if 语句转换为用于赋值的 switch 语句。该函数需要做的是在用户按下提交按钮时让用户输入成为显示的列表项。当输入的数量等于 5 时，它会显示“感谢您的建议”。

我将原始 if 语句作为注释包含在内。

我不知道从哪里开始，以便它与 if 语句的工作方式相同。

    <article>

        <div id="results">

            <ul>

                <li id="item1"></li>

                <li id="item2"></li>

                <li id="item3"></li>

                <li id="item4"></li>

                <li id="item5"></li>

            </ul>

            <p id="resultsExpl"></p>

        </div>

        <form>

            <fieldset>

                <label for="toolBox" id="placeLabel">

                    Type the name of a tool, then click Submit:

                </label>

                <input type="text" id="toolBox" />

            </fieldset>

            <fieldset>

                <button type="button" id="button">Submit</button>

            </fieldset>

        </form>

    </article>

    <script>

        // global variables

        var i=1;

        var listItem = "";

        // function to add input to list

        function processInput() 

        {

            /*

            if (i<=5) 

            {

                listItem = "item" + i;

                document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;

                document.getElementById("toolBox").value = "";

                if (i==5) 

                {

                    document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";

                }

                i++;

            }

            */

            switch (i) {

                case 5:

                    document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";

                    break;

                case default:

                    listItem = "item" + i;

                    document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;

                    document.getElementById("toolBox").value = "";

                    i++;

            }

        }

Answer 1

我会引用道格拉斯·克罗克福德 (Douglas Crockford) 的话：Javascript the good partswitch 语句是一个强大的功能。像大多数有能力的特性一样，它有很多问题——在一个案例中的每个语句之后使用 break 的要求、过程控制流、不合适的语法、代码块的处理等等！不幸的是，解决这些问题需要我们重写它的核心操作方式，并且规范将完全改变，对于像 JavaScript 这样的语言，这将产生大量的向后兼容性问题。底线：坚持 if/else if/else 语句。

Answer 2

我能够弄清楚。我意识到我把“case default”而不是“default”。我必须包含一些从默认到 case 5 的代码，以便它显示最后一个输入以及消息。我还将 i++ 放在 switch 语句之外，以便它在第 5 次迭代后停止，但不会替换最后一个输入。switch (i) {&nbsp; &nbsp; case 5:&nbsp; &nbsp; &nbsp; &nbsp; listItem = "item" + i;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("toolBox").value = "";&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; listItem = "item" + i;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("toolBox").value = "";}i++;