CODEWITHSUNDEEP
javascripthtmljquerycssjquery-events
User14289
User14289

Reputation: 189

Using a switch statement with jQuery

I am attempting to use a switch statement to check if a child has a class. If this child has a particular class, it will add/remove a class to/from that child. The jQuery code I have right now is this:

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

The HTML is as follows:

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

Upvotes: 0

Views: 538

Answers (2)

blex
blex

Reputation: 25659

A switch statement will compare case values to the result of the passed expression. Here, you are comparing a jQuery Object with a boolean. The case will never be reached unless the jQuery Object returns a boolean.

Instead, you could use jQuery selectors to do that check for you, along with the jQuery( selector, context ) function:

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

or do it like this:

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

Upvotes: 1

Heidar
Heidar

Reputation: 689

This should be written like that:

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

Upvotes: 0

Related Questions