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

使用带有jQuery的switch语句

2 个答案: