在 jQuery 中使用 switch 语句

Question

我正在尝试使用 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>

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

Answer 2

这应该这样写：

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