jquery - 显示多个隐藏的 div

Question

我有一系列图片，每张图片后面都有一个 div 和 absolute 定位。 我正在寻找一种使用 jQuery 的方法，使用一段尽可能简短的代码来显示隐藏的 div。

$(document).ready(function(){
    $('#image1').mouseenter(function(){
        $('#imageDescriptor1').show('fast');
    });

    $('#image1').mouseleave(function(){
        $('#imageDescriptor1').hide('fast');
        $('#imageDescriptor1').clearQueue();
    });
});

显然，在理想情况下，我宁愿不必重复代码 5 次；而且 imageDescriptor 中的文本也很明显是独一无二的。
我在这里错过了什么明显的东西吗？也许是一种从图像后面使用 $(this) 的方法？提前致谢!

#imageDescriptor1, #imageDescriptor2, #imageDescriptor3, #imageDescriptor4, #imageDescriptor5{
position:absolute;
top:100px;
left:50px;
z-index:50;
display:none;
padding:5px 5px 5px 5px;
background-color:#f3be05;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
max-width:200px;
}

Answer 1

根据您的 Fiddle 示例，您可以这样做:

• 首先为footerBox div 和imageDescriptor div 分配一个类，这是为了引用Jquery 函数:

  <div id="footerBox1" class="box">
     <div id="imageDescriptor1" class="inside">
  

• 在您可以使用那些类名 引用函数并使用hover() 处理程序之后:

  $('.box').hover(
      function(){
        $('.inside',this).show('fast');
      },
      function(){
        $('.inside',this).hide('fast').clearQueue();
  });
  

查看演示 http://jsfiddle.net/V2rCn/11/