给多个 div 赋予相同的功能答案

【问题标题】：Give multiple divs the same function给多个 div 赋予相同的功能
【发布时间】：2014-01-24 07:47:35
【问题描述】：

我想用相同的 .class 创建多个缩略图。缩略图 div 包含 3 个其他 div。第一个是图像，第二个是显示在 mouseenter 上的描述，第三个是改变不透明度的条。

当鼠标悬停在 .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);
});

});

【问题讨论】：

标签： javascript jquery html fadeto

【解决方案1】：

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

相反，您应该在 mouseenter 或 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/

【讨论】：

【解决方案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]));
    });
}

【讨论】：

【解决方案3】：

您会想要访问该特定缩略图的子对象，这样可以工作：

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

这是fiddle example。

【讨论】：