Question

我设法让一个简单的动画工作，所以当我用“gallery-wrap”类滚动我的div时，顶部会出现一个带有“放大镜”类的图像。

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

    $("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

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

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

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

Answer 4

您需要更改：

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

为：

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

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

Answer 5

因为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（）。

jQuery - 无法让'this'工作

5 个答案: