How to remove class by click function using jquery

Question

I have an image... what i want : when i click it, it should be scaled bigger and a class called "close" should be added to it. So, when i click it again, the image should be resized to its original size and i want to remove the class in the same time that it could be clicked again to grow... I added successfully a class but i can not remove it.

THE HTML :

<div class="intro-img">
    <img src="uploads/images/2.jpg" alt="Sensuality 1" />
</div>

THE CSS :

.intro-img {
    position: relative;
    display: block;
    height: 80%;
    max-width: 80%; 
    margin: 5% auto;
}
.intro-img img {
    height: 100%;
    max-width: 100%;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.intro-img img:hover {
    height: 105%;
    max-width: 105%;
}

THE SCRIPT :

$('.intro-img img').click(function(){
    $('.intro-img img').addClass( 'close');
    $('.intro-img').animate({'height':'100%','max-width':'100%','margin': '0 auto'}, 500, 'easeInCirc');
});
$('.intro-img .close').click(function(){
    $('.intro-img').animate({'margin': '5% auto','height':'80%','max-width':'80%'}, 500, 'easeInCirc');
    $(this).removeClass('close');
});

How to remove the "close" class by the second click ? What is wrong with my script ? (I read a post about it here but i could not use it to my case)

Jon · Accepted Answer · 2014-06-18 22:23:17Z

2

Your script attempts to immediately attach a click handler to all elements matched by .intro-img .close, but there are no such elements in the document before you click the image. Therefore the click handler is not attached to anything.

A good solution is to use a delegated event handler instead, e.g.

$('.intro-img').on('click', '.close', function(){
    $('.intro-img').animate(...);
    $(this).removeClass('close');
});

This handler attaches to .intro-img (which does exist from the beginning) and activates whenever any of its descendants that matches .close is clicked -- which is exactly what you want.

Update: However, if you do the above then your first event handler will also trigger on clicking .close. To prevent that you could check if the img has .close inside the handler, or you could use the solution that follows.

Another good solution is to use a single handler for both toggling on and off, i.e. replacing both event handlers with this:

$('.intro-img img').click(function(){
    var $this = $(this), isClose = $this.is(".close");
    if (!isClose) {
        $('.intro-img').animate(...);
    }
    else {
        $('.intro-img').animate(...);
    }
    $this.toggleClass("close");
});

edited Jun 18, 2014 at 22:23

answered Jun 18, 2014 at 22:17

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Igor Laszlo Over a year ago

Thanks a lot... now, with your methode, when i click the image, it grows and it resize to original at the same time, you can see it here : photography.igorlaszlo.com/test2.html#sensuality

Jon Over a year ago

@IgorLaszlo: That's because the first event still fires. I updated the answer (I also added another approach in the meantime that doesn't have this problem).

Igor Laszlo Over a year ago

#Jon Perfect, it works as it should ! Thanks, i voted for accepted answer !

Collectives™ on Stack Overflow

How to remove class by click function using jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related