在 jQuery 中使用 switch 语句答案

【问题标题】：Using a switch statement with jQuery在 jQuery 中使用 switch 语句
【发布时间】：2015-10-27 11:18:30
【问题描述】：

我正在尝试使用 switch 语句来检查孩子是否有班级。如果这个孩子有一个特定的班级，它将向那个孩子添加/删除一个班级。我现在的 Jquery 代码是这样的：

jQuery(".navigation .navmenu .navbox").mouseenter(function(){
    jQuery(this).addClass("activenavbox");

    switch(jQuery(this).children("a")){
        case jQuery(this).hasClass("homebg"):
            jQuery(this).addClass("homeiconhover");
            jQuery(this).removeClass("homebg");
        }
});


jQuery(".navigation .navmenu .navbox").mouseleave(function(){
     jQuery(this).removeClass("activenavbox");
         switch(this){
            case(this).children("a").hasClass("homeiconhover"):
              jQuery(this).children("a").removeClass("homeiconhover");
              jQuery(this).children("a").addClass("homebg");
          }
});

HTML如下：

<div class="navigation">
    <ul class="navmenu" style="display: inline-block; list-style-type: none;">
        <li class="navbox"><a class="navlink homebg" href="/home">Home</a></li>
        <li class="navbox"><a class="navlink aboutbg" href="/about">About</a>       </li>
        <li class="navbox"><a class="navlink projectsbg" href="/projects">Our Projects</a></li>
        <li class="navbox"><a class="navlink contactbg" href="/contact">Contact Us</a></li>
        <li class="navbox"><a class="navlink loginbg" href="/login">Client Login</a></li>
    </ul>
</div>

【问题讨论】：

在这种情况下，if 语句或toggleClass() 会更合适。
我不太明白这里的流程。我认为在某些情况下两者都会失败，并且不会更改任何类。
jamen，如果你指的是我，你是对的......这是一个简单的粘贴来展示我的设想......我认为 toggleclass/if 可以工作，我需要检查它过多。只是希望对这个问题提出一些建议，而不是让人们为我解决它。

标签： javascript jquery html css javascript-events

【解决方案1】：

switch 语句会将case 值与传递的表达式的结果进行比较。在这里，您将 jQuery 对象与布尔值进行比较。除非 jQuery 对象返回布尔值，否则永远不会达到这种情况。

相反，您可以使用 jQuery 选择器为您进行检查，以及 jQuery( selector, context )函数：

jQuery(".navigation .navmenu .navbox").mouseenter(function(){
    jQuery(this).addClass("activenavbox");

    jQuery("a.homebg", this).addClass("homeiconhover").removeClass("homebg");
});


jQuery(".navigation .navmenu .navbox").mouseleave(function(){
     jQuery(this).removeClass("activenavbox");

     jQuery("a.homeiconhover", this).removeClass("homeiconhover").addClass("homebg");
});

或者这样做：

jQuery(".navigation .navmenu .navbox").mouseenter(function(){
    jQuery(this).addClass("activenavbox")
                .children("a.homebg")
                .addClass("homeiconhover")
                .removeClass("homebg");
});


jQuery(".navigation .navmenu .navbox").mouseleave(function(){
     jQuery(this).removeClass("activenavbox");
                 .children("a.homeiconhover")
                 .removeClass("homeiconhover")
                 .addClass("homebg");
});

【讨论】：

【解决方案2】：

应该这样写：

switch($(this).children("a").hasClass("homeiconhover")){
   case true:
       jQuery(this).children("a").removeClass("homeiconhover");
       jQuery(this).children("a").addClass("homebg");
}

【讨论】：