alt-rock alt-rock - 1 month ago 13
Javascript Question

call jquery function on the active class with event handler

I am trying to call a function to add class

hover
to a link on the event when the carousel slide has the class
active
. The active class iterates over each item, toggling on and off. However the event handler i chose
on()
is not triggering the function to happen. How can i add the class when the item is active?

<div class="carousel">
<div class="item"><a id="link1"></a></div>
<div class="item"><a id="link2"></a></div>
<div class="item active"><a id="link3"></a></div>
</div>


// if slide active, add class hover to the link
var test = jQuery('.hover');
function linkHover(){
if(jQuery('.item.active').length != 0){
jQuery('#link3').addClass('hover');
}
};

jQuery(test).on( 'trigger', linkHover );

Answer

I think your making this more difficult than it needs to be. There should be a function that is called to switch the slide on the carousel. Inside that function just add:

$('.item').each(function() {
  $(this).removeClass('hover');
  $('.item.active').addClass('hover');
});