1

我试图让 div “bio-button” 类既打开隐藏文本的 div 又降低其自身的不透明度。然后当文本的 div 关闭时，它会返回到之前的状态

如果你看这个 fiddle demo，我想要的效果和你点击图片时的效果是一样的。

但我似乎遇到了调用太多函数的问题，也许。我怎样才能更有效地实现这一目标？

jQuery：

$('.bio-button').on('click', function () {
$(this).parent('img').css({opacity:1});
});

这是我的html：

<div id="" class="team-member">
<div class="team-text">
    <p>hello this is Billy's text</p>
    <div class="close"></div>
</div><!-- .team-text -->
<div class="team-photo">
    <img width="437" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/billy.jpg" class="" alt="billy" />                          
    <h2>Billy Senecal</h2>
    <p>Producer / Director</p>
</div><!-- .team-photo -->
<div class="bio-button">BIO</div>   
<div class="clear"></div>
</div><!-- #team-member -->
<div id="" class="team-member">
<div class="team-text">
    <p>THis is Mark's text</p>
    <div class="close"></div>
</div><!-- .team-text -->
<div class="team-photo">
    <img width="439" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/mark.jpg" class="" alt="mark" />                            
    <h2>Mark Montalto</h2>
    <p>Editor / Producer</p>
</div><!-- .team-photo -->
<div class="bio-button">BIO</div>   
<div class="clear"></div>

4

1 回答 1

1

试试这个：

$('.bio-button').on('click', function () {
  $(this).prev('.team-photo').children('img').css({opacity:1});
});

分解它：

单击时.bio-button，查看前面具有 类的相邻兄弟team-photo，然后获取该img元素的子team-photo元素，然后对该元素进行指定的 CSS 调整img。

在上面的例子中，$(this)指的是被点击的元素：$('.bio-button').

于 2013-03-13T19:09:32.920 回答