toggleClass is not toggling the class

Question

I'm trying to toggle a class on the hover event of an element. The code that I have is

        var el = $('[model-id="' + node.id + '"]');

        el.hover(
            function() {
                $(this).toggleClass( "myClass" );
                console.log("in",this.getAttribute("class"))
            },

            function() {
                $(this).toggleClass( "myClass" );
                console.log("out",this.getAttribute("class"))
            }
        )

I have the chrome tools elements tab open, and I'm looking at the dom.

When I hover over the element, I get the message

in element Node basic

and when I leave the element, I get

out element Node basic

so you can see on the "in" event, I am getting an appropriate element, and adding the "myClass" class. however, this is not appearing in the dom inspector.

What am I missing ? It must be something obvious ;)

Could you edit your question and add a working example using the code snippet functionality? Or you could make one using [JSFiddle](https://jsfiddle.net/). — Mike Cluck, Feb 01 '16 at 20:31
When you look in the dom inspector, is the element in the hovered state? I know you can check that on Chrome and I know I've forgotten to do so myself, personally. =) — Nikki9696, Feb 01 '16 at 20:31
What if you use `$(this).prop('class')` instead of `this.getAttribute('class') for debugging? — Matt Ball, Feb 01 '16 at 20:33
Irrelevant to the actual question, but why use `toggleClass()`? if you're adding the class on hover and removing it on mouseleave, why not just use `addClass()` and `removeClass()`? It will be slightly less processing that way. — neilsimp1, Feb 01 '16 at 20:33
@YoYo the comments section isn't really the place for this. Search for it or post a separate question. — Matt Ball, Feb 01 '16 at 20:35
I am trying to get a complete working jsfiddle - problem is the code is part of a much bigger project using jointjs. I'll try ;) — jmls, Feb 01 '16 at 20:38

Peter Rasmussen · Answer 1 · 2016-02-01T20:40:39.543

0

Your code is fine.. you can use hasClass to see if the element has the class. See this fiddle.

el.hover(
    function() {
        $(this).toggleClass( "myClass" );
        console.log("in",$(this).hasClass("myClass"))
    },

    function() {
        $(this).toggleClass( "myClass" );
        console.log("out",$(this).hasClass("myClass"))
    }
)

if you actually wanted to get the class and not just test that it was added. Then you can use $(this).attr("class").

edited Feb 01 '16 at 20:40

answered Feb 01 '16 at 20:35

Peter Rasmussen

16,474
7
46
63

using hasClass returns in false out false – jmls Feb 01 '16 at 20:37
why don't you use addClass/removeClass? i don't understand what the point is of toggleClass in your code. you know the exact states your elements are going to be in. (on/off). Just remove the jquery magic and do the toggle yourself. rule out as much randomness as you can. you could even go straight javascript without jquery. my suspicion is that "this" isn't what you think it is. – Puzzle84 Feb 01 '16 at 20:46

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

so it turns out that the element I was trying to add a class to was within an svg tag. According to jQuery SVG, why can't I addClass? this won't work.

The answer is to either use jQuery3 or use the classList object

this.classList.add('myClass');

does indeed change the DOM

hope this helps someone else looking for the solution to a strange problem!

edited May 23 '17 at 12:31

Community

1
1

answered Feb 01 '16 at 22:12

jmls

2,879
4
34
58

toggleClass is not toggling the class

2 Answers2