Jquery 代码优化 Mouseenter Mouseout答案

【问题标题】：Jquery Code Optimization Mouseenter MouseoutJquery 代码优化 Mouseenter Mouseout
【发布时间】：2011-12-22 19:04:13
【问题描述】：

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

有没有办法优化这个？

这里是代码。

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

亲切

【问题讨论】：

标签： javascript jquery optimization

【解决方案1】：

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

使用 hover + 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');
});

【讨论】：

【解决方案2】：

尝试以下方法：

jQuery('#content article').mouseenter(function(){
  var self = jQuery(this);
  if (self.is('.in_cat') {
    self.removeClass('hidden');
  }
}).mouseout(function(){
  var self = jQuery(this);
  if (self.is('.in_cat') {
    self.addClass('hidden');
  }
});

【讨论】：

【解决方案3】：

<script language="javascript">
$('#content article').mouseenter(function(){
    $(this + '.in_cat').removeClass('hidden');
}).mouseleave(function(){
   $(this + '.in_cat').addClass('hidden')
});
</script>

【讨论】：

【解决方案4】：

你可以使用hover和this->id：

$('#content article').hover(
   function() {
      $('#' . this->id . ' .in_cat').removeClass('hidden');
   },
   function() {
      $('#' . this->id . ' .in_cat').addClass('hidden');
   }
 );

【讨论】：

【解决方案5】：

您可以使用内置的 jQuery 函数来切换元素的显示。例如（假设你有类似下面的标记）：

HTML

<div id="content">
    <article id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <p class="in_cat">.in_cat</p>
    </article>
    <article id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <p class="in_cat">.in_cat</p>
    </article>
</div>

CSS

#content {
   border:1px dashed red;
   width:400px;
   height:100px; 
}

#one {
    color:darkblue;
}

#two {
    color:darkgreen;
}

.in_cat {
    display:none;
}

JavaScript

$('#content article').hover(function() {
    $('#' + this.id + ' .in_cat').toggle();
});

或者如果你可以使用 jQuery 1.7+

$('#content').on('hover', 'article', function() {
    $('#' + this.id + ' .in_cat').toggle();
});

此外，还提供fiddle 表单。

【讨论】：

【解决方案6】：

如果你的 HTML 内容是这样的：

<div id='content'>
 <article id='something'>
  <div class='in_cat'></div>
 </article>
</div>

那么你的 JS 代码可以缩短为：

$('#content article').mouseenter(function()
{
 $(this).find('.in_cat').removeClass('hidden');
}).mouseout(function()
{
 $(this).find('.in_cat').addClass('hidden');
});

但是请记住，您想要实现的事情（至少我猜是在悬停时显示内容，在鼠标悬停时隐藏）可以在纯 CSS 中完成：

#something .in_cat {display: none}
#something:hover .in_cat {display: block !important}

【讨论】：