CODEWITHSUNDEEP
jquery
Francesca
Francesca

Reputation: 28138

jQuery use .hasClass to run several different methods

I'm trying to use .hasClass as a sort of if statement. By determining which class the clicked element has, I'm running several different methods.

If the span clicked has a class of inactive then I wish to:

  1. Remove the class inactive
  2. Add new class active
  3. Make the next sibling div with class definition slide down (using .next)

And in the reverse, if the span clicked has a class of active then:

  1. Remove the class active
  2. Add class inactive
  3. Make the next sibling div with class definition slide up.

Essentially I'm showing or hiding a certain element and adding some styling using the classnames.

Full JS Fiddle here:

http://jsfiddle.net/franhaselden/9ms79uhe/3/

I had it working OK just using this for the active class, but when I tried to add in .hasClass it stopped working. Am I using .hasClass incorrectly?

I get the error undefined is not a function on line 6, so the start of my .hasClass line.

Here is the jQuery:

$( "#jargon-main span" ).click(function() { 
    // if class = "active" then:
      // remove class active
      // add class inactive
      // make .next sibling with class .definition slideUp
    $(this).hasClass("active").removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});

    // if class = "inactive" then:
        // remove class inactive
        // add class active
        // make .next sibling with class .definition slideDown
     $(this).hasClass("inactive").removeClass('inactive').addClass('active').next(".definition").slideDown( "fast", function() {});

});

Upvotes: 0

Views: 134

Answers (3)

adeneo
adeneo

Reputation: 318182

As the name suggests, jQuery's hasClass returns a boolean, it's either true or false, depending on wether or not the element has the class.

If you want to target only elements that has a certain class, you use it as a regular selector, or you use a condition

if ( $(this).hasClass("inactive") ) {
    $(this).removeClass('inactive')
           .addClass('active')
           .next(".definition")
           .slideDown( "fast", function() {});
}

There's also jQuery's toggleClass that will toggle the class automatically.

$(this).toggleClass('active inactive').next(".definition").slideToggle("fast");

FIDDLE

Upvotes: 1

icanit
icanit

Reputation: 1

.hasClass() returns Boolean, so You can't call .removeClass() from result of .hasClass().

So working Js Fiddle will be: http://jsfiddle.net/99qebvjr/1/

$( "#jargon-main span" ).click(function() { 
    // if class = "active" then:
      // remove class active
      // add class inactive
      // make .next sibling with class .definition slideUp
    if($(this).hasClass("active")){         
       $(this).removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});
    }
    // if class = "inactive" then:
        // remove class inactive
        // add class active
        // make .next sibling with class .definition slideDown
    else if($(this).hasClass("inactive")){
      $(this).removeClass('inactive').addClass('active').next(".definition").slideDown( "fast", function() {});
    }   
});

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

Yes. $.hasClass returns a Boolean(true or false). So you need a if condition

if($(this).hasClass("active")){
    $(this).removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});
}

Upvotes: 1

Related Questions