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

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

本文关键字：this #id 大小写 开关 一个 检查      更新时间：2023-09-26

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

添加小提琴以使其有意义

$(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>

所以基本上我希望 #1 和 #2 在我悬停在 #iz 上时亮起，#2 和 #3 在我悬停在 #zn 上时亮起"等等......我还希望他们在我不再将鼠标悬停在按钮上后回到原来的班级。

感谢您的帮助

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

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

试试...

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

。自。。。

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

。缺少支架。

switch 语句的键应该是元素的属性，每个大小写都应该是一个潜在的值。除了语法错误之外，您当前的代码有效地使用了 if 语句。试试这个：

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

应该注意的是，具有单个案例的switch是多余的，您也可以使用 if 语句。

相关文章：