jQuery - 无法获取“this”去工作

Question

我已经成功地实现了一个简单的动画，因此当我用“gallery-wrap”类滚动我的 div 时，带有“magnifier”类的图像会出现在顶部。

我的问题是我有很多带有“gallery-wrap”类的 div 和很多带有“magnifier”类的图像。

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $("img.magnifier").show();            
            }, function() {
        $("img.magnifier").hide();
    });

img.magnifier 位于 .gallery-wrap 父 div 内部，而不是 .gallery-wrap 内部。

我需要它，所以这只执行当前悬停的元素，它已经在执行此操作，但它为页面上的所有 img.magnifier 制作动画？

我以为它可能看起来像这样......

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $(this).parent("img.magnifier").show();            
            }, function() {
        $(this).parent("img.magnifier").hide();
    });

但无法让它发挥作用。

任何想法都会有很大的帮助，谢谢。

Answer 1

难道不应该是这样的：

$('.gallery-wrap').hover(function() {   
    $(this).find("img.magnifier").show();            
        }, function() {
    $(this).find("img.magnifier").hide();
});

如果我理解正确的话， img.magnifier 是 .gallery-wrap 的子级，所以 find()应该使用而不是parent()。

Answer 2

您很接近：

$(this).parent("img.magnifier").show(); 

将其更改为：

$(this).parent().find("img.magnifier").show(); 

那么它应该可以工作。当然，对您的 hide() 执行同样的操作。

Answer 3

您可以为 gallery-wrap 和关联的 img.magnifier 分配匹配的 id 值吗？

$('.gallery-wrap').hover(function() {   

    var id = $(this).attr('id');
    $("img.magnifier#"+id).show();            
        }, function() {
    $("img.magnifier#"+id).hide();
});

Answer 4

由于 img.magnifier 不在 .gallery-wrap 内，因此 find() 不会在这里执行此操作。

试试这个：

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $(this).parents("img.magnifier").last().show();            
            }, function() {
        $(this).parents("img.magnifier").last().hide();
    });

如果在parents()集合中有不止一个img.magnifier，则.last()是必要的。

Answer 5

您需要将：更改

$(this).parent("img.magnifier")

为：，

$(this).find("img.magnifier")

因为 img 标签是 gallery-wrap 的子元素。