Question

对不起这个绝对的新手问题。这是一个非常简单的问题，但是在过去的几个小时里，我没有运气。（刚开始使用jQuery）

当你翻转一个命中区div时，我正试图为div设置动画。（我创建了命中区div，因为带文本的顶部div也将被动画化）

jQuery的：

$(".hitzone").mouseover(function(){
    $(this).parent("#teal_rollover").animate({ opacity: 0.75 }, 400, 'swing');   
});

HTML：

<div id="portfolio_item1">              
    <div id="background_img"><img src="geof17/cat.png" /></div> 
    <div id="teal_rollover"><img src="geof17/teal_rollover.png" /></div>
    <div id="portfolio_tem_cat1_tekst">poessie <br />illustratie </div> 
    <div class="hitzone"></div> 
</div>

我无法选择id为teal_rollover的div。

Answer 1

使用此

$(this).parent().find("#teal_rollover").animate(....);

Answer 2

请尝试sibling而不是parent？

Answer 3

.hitzone不是#teal_rollover的孩子，而是兄弟姐妹。你可以使用.sibling()选择器，或者因为teal_rollover是一个ID，你可以使用那个选择器而不会更具体。

Answer 4

#teal_rollover div不是.hitzone的父级。

试试这个：

$(".hitzone").mouseover(function(){
    $("#teal_rollover").animate({ opacity: 0.75 }, 400, 'swing');
});

Answer 5

理想情况下，ids shuold在页面上是唯一的，因此您可以直接使用ID选择器$("#teal_rollover")。

$(".hitzone").mouseover(function(){
    $("#teal_rollover").animate({ opacity: 0.75 }, 400, 'swing');   
});

如果您不能拥有唯一ID，那么我建议您删除id属性并给出一个类。然后，您可以使用siblings方法使用类选择器来查找相应的元素并为其设置动画。

Answer 6

由于teal_rollover是一个ID，您可以使用

$("#teal_rollover").animate({ opacity: 0.75 }, 400, 'swing');

如果你真的想通过父元素访问，那么你可以这样做，

$(this).siblings('#teal_rollover').animate({ opacity: 0.75 }, 400, 'swing');

Answer 7

网页上的ID必须是唯一的，因此您只需使用$("#teal_rollover")。

事实上，仅使用ID进行选择会比使用parent和siblings等内容更好。

Answer 8

尝试使用prevUntil而不是parent，因为#teal_rollover不是hitzone的父级，它是兄弟姐妹。

http://api.jquery.com/prevUntil/

使用$（this）在另一个div中选择一个div

8 个答案: