如何使用類名僅在一個元素上運行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); 
});

Answer 2

你可以這樣做

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