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返回的内容选择应采取的操作。

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

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

Answer 3

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

Answer 4

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

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

Answer 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格式提供。

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

然而请记住，你想要实现的东西（至少我想在悬停上显示内容，隐藏在mouseout上）可以在纯CSS中完成：

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

Jquery代码优化Mouseenter Mouseout

6 个答案:

HTML

CSS

的JavaScript