[英]jQuery - can't get the 'this' to work
i've managed to get a simple animation working so when I roll over my div with the class "gallery-wrap", an image with the class "magnifier" appears on top.我已经设法让一个简单的 animation 工作,所以当我用 class“画廊包装”翻转我的 div 时,顶部会出现一个带有 class“放大镜”的图像。
My problem is I have lots of divs with the class "gallery-wrap" and lots of images which have the class "magnifier".我的问题是我有很多带有 class “gallery-wrap”的 div 和很多带有 class “放大镜”的图像。
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$("img.magnifier").show();
}, function() {
$("img.magnifier").hide();
});
The img.magnifier
is located inside the .gallery-wrap
parent div, not inside .gallery-wrap
. img.magnifier
位于.gallery-wrap
父 div 内,而不是.gallery-wrap
内。
I need it so this does only the current hovered element, which it is doing already, but its animating all the img.magnifier
on the page?我需要它,所以它只做当前悬停的元素,它已经在做,但是它为页面上的所有img.magnifier
设置动画?
I thought it would maybe look like this...我以为它可能看起来像这样......
$("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();
});
But cannot get it to work.但无法让它工作。
Any ideas would be a huge help thanks.任何想法都会有很大的帮助,谢谢。
Shouldn't it be like this:不应该是这样的:
$('.gallery-wrap').hover(function() {
$(this).find("img.magnifier").show();
}, function() {
$(this).find("img.magnifier").hide();
});
If I understand correctly, img.magnifier
is a child of .gallery-wrap
, so find()
should be used instead of parent()
.如果我理解正确, img.magnifier
是.gallery-wrap
的孩子,所以应该使用find()
而不是parent()
。
You were close with:你与:
$(this).parent("img.magnifier").show();
Change it to:将其更改为:
$(this).parent().find("img.magnifier").show();
Then it should work.然后它应该工作。 Do the same thing with your hide()
of course.当然,用你的hide()
做同样的事情。
Can you assign matching id values to the gallery-wrap and associated img.magnifier?您可以将匹配的 id 值分配给 gallery-wrap 和关联的 img.magnifier 吗?
$('.gallery-wrap').hover(function() {
var id = $(this).attr('id');
$("img.magnifier#"+id).show();
}, function() {
$("img.magnifier#"+id).hide();
});
You need to change:你需要改变:
$(this).parent("img.magnifier")
to:至:
$(this).find("img.magnifier")
since the img tag is a child element of your gallery-wrap.因为 img 标签是你的画廊包装的子元素。
As img.magnifier is not inside.gallery-wrap, find() will not do it here.由于 img.magnifier 不在 inside.gallery-wrap 中,所以 find() 不会在这里执行。
Try this one:试试这个:
$("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();
});
The.last() is necessary if you have more than just one img.magnifier in the parents() collection.如果在 parents() 集合中有多个 img.magnifier,则必须使用 the.last()。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.