javascript - Jquery 代码优化 Mouseenter Mouseout

Question

我刚刚写了一些运行良好的代码。但我觉得它“有点长”。我想我重复一遍。

有没有办法优化这个？

这是代码。

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

亲切地

Answer 1

您可以使用 jQuery.hover它可以为进入和离开分配相同的处理程序。然后使用 JQuery.toggleClass 而不是 addClass/removeClass 或根据 hasClass 返回的内容选择应该采取的操作.

悬停 + toggleClass

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

悬停+条件

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