CODEWITHSUNDEEP
jquery
JohnRobertPett
JohnRobertPett

Reputation: 1183

Add and remove class issue JQuery

I am trying to remove a class that has been added by a previous JQuery event, but it just won't play ball. Please guide me!

This is what applies the class:

$('.project').click(function() {
        var imageTotal = $(this).find('.gallery img').length;
        if (imageTotal === 1) {
            $('.next-image', this).hide();
            $('.prev-image', this).hide();
        } else {
            $('.next-image', this).show();
            $('.prev-image', this).show();
        }
        $('img.feature').hide();
        $('.gallery img:nth-of-type(' + imageCounter + ')', this).addClass('current');
        $(this).addClass('active');
    });

And this is what I am trying to remove it with:

$('.back').click(function() {
        $('.gallery').hide();
        $('.back').hide();
        $('img.feature').show();
        $(this).parent('.project').find('div').removeClass('active');
        $('.prev-page').show();
    });

This is the HTML structure:

<div class="project">
                <img class="feature" src="content/dream1.jpg"/>
                <div class="description">
                    <h3>Exhibition Roadshow</h3>
                    <h4>The Royal Borough of Kensington and Chelsea 2012</h4>
                </div>
                <div class="gallery">
                    <img src="content/dream2.jpg"/>
                    <img src="content/dream3.jpg"/>
                    <img src="content/dream4.jpg"/>
                    <img src="content/dream5.jpg"/>
                    <div class="next-image">&rarr;</div>
                    <div class="prev-image">&larr;</div>
                </div>
                <div class="back">S</div>
            </div>

You can see the live example here, if that helps...

Upvotes: 0

Views: 170

Answers (3)

MarZab
MarZab

Reputation: 2623

your first issue was: $(this).parent('.project').find('div').removeClass('active');

but the real issue is, the class DOES get removed, but you fail to terminate the catch event, so it bubbles down to your .project on click event that sets the same class again. It all happens at the same time so it seems like the class is never removed.

the solution? add return false; at the end of the click event

Upvotes: 0

rahul maindargi
rahul maindargi

Reputation: 5625

In $('.project').click(function() { method $(this).addClass('active'); adds the active to $('.project')...

and you are trying to remove it from childs of $('.project')... what you need is 

$('.back').click(function() {
        $('.gallery').hide();
        $('.back').hide();
        $('img.feature').show();
        $(this).parent('.project').removeClass('active');
        $('.prev-page').show();
    });

Upvotes: 0

Carl Rannaberg
Carl Rannaberg

Reputation: 141

You're removing the class from the wrong element. This line:

$(this).parent('.project').find('div').removeClass('active');

Should be like this:

$(this).closest('.project').removeClass('active');

Since the .project is the element you want to remove the active class. What you're doing above is searching "div" inside the .project element.

Upvotes: 1

Related Questions