Question

我正在尝试使用div“生物按钮”类来打开隐藏文本的div并降低其自身的不透明度。然后当文本div关闭时，它返回到先前的状态

如果查看this 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>

Answer 1

请改为尝试：

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

要打破它：

点击.bio-button后，查看前面有一个team-photo类的相邻兄弟，然后获取img元素team-photo element，然后对img元素进行指定的CSS调整。

在上面的示例中，$(this)引用了点击的元素：$('.bio-button')。

jQuery单击功能以增加不透明度

1 个答案: