Question

I want to make a animation when the user clicks on an element. Except if the element has the class ‘active’.

<div class="collectionContainer">
            <div class="collectionName">SPRING SUMMER <br> 2012</div>
            <div class="collSex"><a href="#" id="collection1-man" class="active"> MAN </a></div>
            <div class="collSex"><a href="#" id="collection1-woman"> WOMAN </a></div>
        </div> 

my jquery code

$('.collSex a').click(function(){
        $('.collSex a').removeClass('active');
        $(this).addClass('active');
        ...
        ...
    });

When an element has the class active I don’t want to make the action/animation…

How should I do it??

Answer 1

You can use the .hasClass ^[docs] method:

$('.collSex a').click(function(){
    if(!$(this).hasClass('active'))
        $('.collSex a.active').andSelf().toggleClass('active');
        //...
    }
});

or use event delegation:

$('.collSex').on('click', 'a.active', function() {
    $('.collSex a.active').andSelf().toggleClass('active');
    //...
});