Switch语句错误

Switch statement error?

本文关键字：错误语句 Switch 更新时间：2023-09-26

我一直在编辑一个脚本，当点击菜单图标时，它会变成蓝色。原始脚本有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值，请将this.id.match（"something"）更改为case"somethings"。如果您试图应用正则表达式来匹配字符串的部分，我认为您不能使用switch。

开关在您的情况下所做的：对于每个情况，它调用match方法并决定函数的结果（数组或null）是否等于您的字符串。当然，这种情况从来没有发生过。

下面是您的问题的一个工作示例。Js投标链接

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;
        }
    }
});