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??
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');
//...
});