CODEWITHSUNDEEP
javascriptjqueryhtml
Marc
Marc

Reputation: 746

JQuery hasClass - why does it always return false in this case?

I have a span with a background image that I want to alternate between a background image of a plus and minus on click. I want to add and remove the class 'open' to do this. My span looks like this...

<span class="expand open"></span>

And my JQuery looks like this...

$(function() {
    $('.expand').click(function() {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
        } else {
            $(this).addClass('open');
        }
    });
});

The behaviour I'm getting is that it will add the class 'open' but then after repeated clicks will not remove it again. Logging to the console has shown that my if statement is always evaluating false.

I've considered using toggleClass but haven't done so because once this is working I intend to use the same if statement to show / hide content blocks.

http://jsfiddle.net/Vz7YL/

EDIT Since people are focussing on my css, I'll provide that too. (SASS/SCSS):

.expand {
    background: url(/images/plus-minus-orange.gif) top center no-repeat;
    display: block;
    height: 21px;
    margin: 0 auto;
    width: 22px;
    &.open {
        background: url(/images/plus-minus-orange.gif) bottom center no-repeat;
    }
}

Can I also add that the span IS displaying correctly and IS clickable, and I cannot recreate the problem with a simplified version of the code.

Upvotes: 1

Views: 3728

Answers (5)

Marc
Marc

Reputation: 746

While none of the answers here provide me with a solution, one of the comments on my question did. Substituting the class 'open' for and alternative such as 'expanded' resolved the problem. Thanks @Doorknob

Upvotes: 0

Narendra Jarad
Narendra Jarad

Reputation: 58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        .expand {
            background: url('/Images/Icons/greenplus.png') top center no-repeat;
            display: block;
            height: 21px;
            margin: 0 auto;
            width: 22px;
        }
        .open {
            background: url('/Images/Icons/redminus.png') bottom center no-repeat;
        }
    </style>

    <script type="text/javascript">

        $(function () {
            $('.expand').click(function () {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                } else {
                    $(this).addClass('open');
                }
            });
        });        
    </script>
</head>
    <body>
        <span class="expand open"></span>
    </body>
</html>

This works for me.

Upvotes: 1

phpsmashcode
phpsmashcode

Reputation: 746

Fiddle works fine. So the issue is the click don't work for the background image. Try to add some width and height for the span element and try.

Like this 

.expand {
background: url(http://upload.wikimedia.org/wikipedia/commons/a/a6/Plus_orange.gif) top center no-repeat;
display: block;
height: 21px;
margin: 0 auto;
width: 22px;

} .open { background: url(http://www.ilsc.com/course-resource/images/sign-minus-orange.gif) bottom center no-repeat; } }

http://jsfiddle.net/Vz7YL/4/

Upvotes: 0

Narendra Jarad
Narendra Jarad

Reputation: 58

Fiddile Works fine. You need to add some text in span.

enter image description here

Upvotes: 1

Mritunjay
Mritunjay

Reputation: 25882

Your fiddle works fine for me. Just add some text in span So you can actually click on span.

<span class="expand open">Some Text Here</span>

Upvotes: 1

Related Questions