切换语句错误？答案

【问题标题】：Switch statement error?切换语句错误？
【发布时间】：2013-08-25 21:45:28
【问题描述】：

我一直在编辑一个脚本，以便在单击菜单图标时将其变为蓝色。原始脚本有 8 个 if 语句。这很有效，但是当我将 if 语句更改为 switch 时，它停止了工作。我已经检查了三次是否有语法错误、拼写错误等，但菜单图标仍然是灰色的！

谁能给我一个解释？

window.onload = function() {

    [].forEach.call(document.querySelectorAll('.navico'), function(el) { 
        el.addEventListener('click', imageButtonClickHandler); 
    });


    function imageButtonClickHandler() 
    {  

        switch(this.id) 
        {
           case(this.id.match("aboutnav")):

                grey();
                $('#abouttitle').css('color', 'blue');
                $('#a').css('color', 'blue');
            break;

           case(this.id.match("routenav")):

                grey();
                $('#routetitle').css('color', 'blue');
                $('#b').css('color', 'blue');

            break;

           case(this.id.match("enternav")):

                grey();
                $('#entertitle').css('color', 'blue');
                $('#c').css('color', 'blue');

            break;

           case(this.id.match("racedaynav")): 

                grey();
                $('#racedaytitle').css('color', 'blue');
                $('#d').css('color', 'blue');

            break;

           case(this.id.match("gallerynav")):

                grey();
                $('#e').css('color', 'blue');
                $('#gallerytitle').css('color', 'blue');

            break;

           case(this.id.match("newsnav")):

                grey();
                $('#f').css('color', 'blue');
                $('#newstitle').css('color', 'blue');

            break;

           case(this.id.match("resultsnav")): 

                grey();
                $('#g').css('color' , 'blue');
                $('#resultstitle').css('color', 'blue');

            break;

           case(this.id.match("contactnav")): 

                grey();
                $('#contacttitle').css('color', 'blue');
                $('#h').css('color', 'blue');
            break;

            }
        }
    }

};

谢谢！

【问题讨论】：

不知道是什么问题，但考虑使用通用类而不是 ID。您可能可以大量减少该代码并使其更清晰。
嗯，这似乎也不起作用。不过还是谢谢！
将“case(this.id.match('...')):”改为“case ...:”
字符串何时匹配数组或null？
"switch(myArray[...])"

标签： javascript if-statement syntax switch-statement

【解决方案1】：

如果您要查找确切的 ID 值，请将 this.id.match("something") 更改为 case "something"。如果您尝试应用正则表达式来匹配字符串的某些部分，我认为您不能使用 switch。

switch 在你的情况下做了什么：对于每个 case，它调用 match 方法并决定函数的结果（数组或 null）是否等于你的字符串。这当然不会发生。

【讨论】：

谢谢，我正在寻找确切的 ID，但它仍然无法正常工作！也许我会改用 IF 语句！
我会说引号必须保留。你会删除哪些？
@Gyandeep 这是我的 if 语句代码 jsfiddle.net/AdamMartin121/n5uGA/1
if(this.id.match("routenav")) -> case "routenav":
以前没用，但现在可以用了！哈哈！谢谢@honza_p！感谢大家的帮助！

【解决方案2】：

这是您的问题的工作示例。 JsFiddle link

HTML：

<div id="aboutnav" class="navico">Click 1</div>
<div id="routenav" class="navico">Click 2</div>
<div id="enternav" class="navico">Click 3</div>
<div id="racedaynav" class="navico">Click 4</div>

Javascript：

 $(document).ready(function () {

    [].forEach.call(document.querySelectorAll('div.navico'), function (el) {
        el.addEventListener('click', imageButtonClickHandler);
    });


    function imageButtonClickHandler() {
        switch (this.id) {
            case "aboutnav":

                $('#aboutnav').css('color', 'blue');
                $('#a').css('color', 'blue');
                break;

            case "routenav":

                //grey();
                $('#routenav').css('color', 'red');
                $('#b').css('color', 'blue');

                break;

            case "enternav":

                //grey();
                $('#enternav').css('color', 'yellow');
                $('#c').css('color', 'blue');

                break;

            case "racedaynav":

                //grey();
                $('#racedaynav').css('color', 'orange');
                $('#d').css('color', 'blue');

                break;
        }

    }
});

【讨论】：