javascript - 如何使用类名仅在一个元素上运行 jquery 函数。有更多的元素使用相同的类

Question

我的画廊页面中有以下代码来显示我拥有的画廊。

<div id="gallery">
    <?php
    if (!empty($gallery)) {
        foreach ($gallery as $row) {
            ?>
            <div class="album_holders">
                <div class="image_holder">
                    <img src="images/gallery/<?php echo $row['img_name']; ?>" width="150" height="75"/>
                </div>
                <div class="title_holder">
                    <?php echo $row['title']; ?>
                </div>
            </div>
        </div>
        <?php
    }
}
?>
</div>

所以我需要为所有 album_holders 添加鼠标悬停动画。当鼠标移到相册上时，我需要使用 jquery 函数在其下方显示相册标题。

这是我的 jquery 代码

$(".image_holder").on("mouseover", function ()
{
   $(".title_holder").animate({
       "opacity": 1
   },1500,$easing2); 
});

但问题是当我将鼠标移到一个专辑上时，每个专辑都显示它的名字。怎么能阻止这个。我在互联网上搜索，发现我必须使用 .on 函数。要么我还在使用它，但每样东西都显示它的名字。

Answer 1

你可以使用this获取相对的.album_holders，然后在其中找到.title_holder。

$(".image_holder").on("mouseover", function ()
{
   $(this).closest('.album_holders').find('.title_holder').animate({
       "opacity": 1
   },1500,$easing2); 
});