给出多个Divs相同的功能

Question

我想创建具有相同.class的多个缩略图。缩略图div包含其他3个部门。第一个是一个图像，第二个是显示在鼠标上的描述，第三个是一个变化不透明度的栏。

当鼠标徘徊在.thumbnail上方时，两个元素都应执行其函数。

我的问题是，现在每个缩略图都执行该功能，因此现在强调了每个缩略图。我该如何更改此操作，因此在悬停在它上方时只有一个缩略图？

html：

<div class="thumbnail">    
    <div class="thumbnail_image">
        <img src="img/Picture.png">
    </div>
    <div class="thumbnail_describe">
        <p>Description</p>
    </div>
    <div class="thumbnail_footer">
        <p>Text</p>
    </div>
</div>

jQuery：

$(document) .ready(function() {
var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')
//mouseover thumbnail_describe
$thumb.mouseenter(function() {
    $thumb_des.fadeTo(300, 0.8);
});
$thumb.mouseleave(function() {
    $thumb_des.fadeTo(300, 0);
});

//mouseover thumbnail_footer
$thumb.mouseenter(function() {
    $thumb_ft.fadeTo(300, 1); 
});
$thumb.mouseleave(function() {
    $thumb_ft.fadeTo(300, 0.8);
});
});

Answer 1

您的代码行为是这样的，因为您将fadeTo函数应用于$thumb_des和$thumb_ft选择器，分别包含页面的所有描述和页脚。

相反，您应该选择触发鼠标事件的缩略图的描述和页脚，在Mousenter或Mouseleave函数内部。

您可以更改以优化代码的另一件事是仅在事件侦听功能时使用，并同时在描述和页脚上执行这两个操作：

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

完整工作JSFIDDLE：http：//jsfiddle.net/yaz8h/

Answer 2

当您做：

$thumb_des.fadeTo(300, 0.8);

它淡入$ thumb_des中的所有节点。您想要的是仅淡入与$ thumb中正确节点相对应的一个。

尝试以下操作：

for (i = 0; i < $thumb.length; i++)
{
    $thumb[i].mouseenter(function (des) {
        return function() {
            des.fadeTo(300, 0.8);
        };
        }($thumb_des[i]));
    });
}

Answer 3

您需要访问该特定缩略图的子对象，类似的东西可以工作：

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

这是一个小提琴示例。