Question

I just wrote some code that works very well. But I feel that it is “a little long”. I think I repeat my self.

Is there a way to optimize this?

Here is the code.

jQuery('#content article').mouseenter(function(){
    var id = jQuery(this).attr('id');
    var elHover = '#'+id+' .in_cat';
    jQuery(elHover).removeClass('hidden');
});

jQuery('#content article').mouseout(function(){
    var id = jQuery(this).attr('id');
    var elHover = '#'+id+' .in_cat';
    jQuery(elHover).addClass('hidden');
});

cordially

Answer 1

You can use jQuery.hover which can assign the same handler for both enter and leave. Then use JQuery.toggleClass instead of addClass/removeClass or choose which action should be taken based on what hasClass returns.

With hover + toggleClass

jQuery('#content article').hover(function(){
    var id = jQuery(this).attr('id');
    var elHover = '#'+id+' .in_cat';
    jQuery(elHover).toggleClass('hidden');
});

With hover + conditional

jQuery('#content article').hover(function(){
    var id = jQuery(this).attr('id');
    var $elHover = jQuery('#'+id+' .in_cat');

    $elHover.hasClass('hidden') ?
        $elHover.removeClass('hidden') :
        $elHover.addClass('hidden');
});