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

根据您的小提琴示例，您可以执行此操作：

首先为footerBox div和imageDescriptor div分配一个类，以便对Jquery函数进行引用：
```
<div id="footerBox1" class="box">
   <div id="imageDescriptor1" class="inside">
```

您可以使用class names引用该函数并使用hover()处理程序：

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

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

Answer 2

您可以使用jQuery .closest()并提供HTML元素类：

HTML就像这样：

<img class="image" />
<p class="descriptor">[...]</p>

像这样的jQuery Javascript（你可以像在你的例子中那样在DOM中包含它）：

$(".image").on( "hover", function(){ // mouse enter
    $(this).closest(".descriptor").show('fast');
}, function(){ // mouse leave
    $(this).closest(".descriptor").hide('fast').clearQueue();
});

Answer 3

您可以使用其类（将应用于所有图像）选择图像，然后使用以下任一方法遍历DOM以查找正确的描述：

find()或children()
closest()或parent()
next()如果描述是图片的兄弟
或上述组合

e.g。

$('.image').mouseenter(function() { 
    $(this).find('.description').show(); 
});

要显示多个隐藏的div

3 个答案: