编写一个检查 $(this) #id 大小写的开关

Question

所以我有一个菜单栏，它基本上是 div 中的一组块。我想编写一个 jquery 脚本，当您将鼠标悬停在特定块上时，它会更改菜单中周围 2 个块的 class。我想我会做一个 switch 语句来检查 $(this) id，然后更改周围的 class。我还想在我不再悬停时将 class 改回来（就像我悬停在原版上一样。

添加 fiddle 使其有意义

$(document).ready(function() {
    $(".kontakt").hover(
       function() {
       $(".kontakt").width("30%");
       $(".kontakt").css("margin-left", "35%");
       
       $(".kontakt").append("<a>mobitel:031-535-919</a>");
       $(".kontakt").append("<br><a>stacionarni tel.:01-3664-515</a><br>");
       $(".kontakt").append("<br><a>email:</a><a href='mailto:sustersic_miha@hotmail.com'>sustersic_miha@hotmail.com</a><br>");
       $(".kontakt").append("<br><a>Visoko 19<br>1292 Ig<br>Slovenija</a>");
       },  
        function() {
       $(".kontakt").empty();
       $(".kontakt").width("10%");
       $(".kontakt").css("margin-left", "45%");
       $(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
        });
    $(".menubutton").hover(
        function() {
        $(this).addClass("activatedmenubutton");
        switch(true){
            case $(this.attr('id') === "iz"):
            $("#1").addClass("activatedmenubutton");
            $("#2").addCLass("activatedmenubutton");
            break
        }
        },
        function (){
        $(this).removeClass("activatedmenubutton");    
        });
});

body{
    margin:0;
    font-family:verdana;
    
    background-image:url("images/background_test.jpg");
    background-size:cover;    
}
.topmenu {
    width:90%;
    margin:auto;
    
    background-color:#3366ff;
    
    border-radius:0px 0px 10px 10px;
    text-align:center;
    
    opacity:0.7;
}
.menubutton {
    margin-top:5px;
    margin-bottom:5px;
    display:inline-block;
    background-color:#ffffff;
    font-weight:bolder;
    
    padding:2px;
}
.activatedmenubutton {
    background-color:#cccccc;
}
.menubreak {
    background-color:#ffffff;
    display:inline-block;
    
    padding:2px;
}

.kontaktlabel {
   font-weight:bolder;
}   
.kontaktlabelbox {
    background-color:#ffffff;
    margin-top:6px;
    margin-bottom:5px;
}
.content{    
}
.kontakt{
    position:absolute;
    bottom:0;
    width:10%;
    margin-left:45%;
    
    background-color:#3366ff;
    
    border-radius: 5px 5px 0px 0px;
    text-align:center;
    
    opacity:0.7;
}

<!DOCTYPE html>

<html>
    <head>
        <title>Iščem delo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="unicornsandrainbows.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="magic.js"></script>
    </head>
    <body>
        <div class="topmenu">
            <a class="menubreak" id="1">|</a
            ><a class="menubutton" id="iz">Izobrazba</a
            ><a class="menubreak" id="2">|</a
            ><a class="menubutton" id="zn">Znanja in Kompetence</a
            ><a class="menubreak" id="3">|</a
            ><a class="menubutton" id="izk">Izkušnje</a
            ><a class="menubreak" id="4">|</a
            ><a class="menubutton" id="pč">Prosti Čas</a
            ><a class="menubreak" id="5">|</a
            ><a class="menubutton" id="fo">Fotografije</a
            ><a class="menubreak" id="6">|</a>
        </div>
        <div class="content">            
        </div>
            <div class="kontakt">
                <div class="kontaktlabelbox">
                    <div class="kontaktlabel">Kontakt</div>
                </div>
            </div>
    </body>
</html>

所以基本上我希望当我将鼠标悬停在#iz 上时，#1 和#2 会亮起，当我将鼠标悬停在#zn 上时，#2 和#3 会亮起，依此类推......我也希望它们回来在我不再将鼠标悬停在按钮上之后，他们原来的 class。

感谢您的帮助

Answer 1

尝试...

case $(this.attr('id') === "iz"):

...到...

case ($(this).attr('id') === "iz"):

...缺少括号。

Answer 2

switch语句的key应该是元素的属性，每个case应该是一个潜在的值。除了语法错误之外，您当前的代码实际上是在使用 if 语句。试试这个：

switch (this.id) {
    case "iz":
        $("#1, #2").addClass("activatedmenubutton");
        break;
}

需要注意的是 switch 和单个 case 是多余的，你也可以使用 if 语句。

Answer 3

试试这个。你甚至不需要开关。

$(".menubutton").hover( function() {
    $(".topmenu a").removeClass("activatedmenubutton");
    $(this).addClass("activatedmenubutton");
    $(this).prev().addClass("activatedmenubutton");
    $(this).next().addClass("activatedmenubutton");

});

编写一个检查 $(this) #id 大小写的开关

Writing a switch that checks $(this) #id as case

html

javascript

css

jquery

switch-statement