jQuery 隐藏和显示多个元素

Question

我有多个包含照片和文本的 div。当用户点击“个人简介”按钮时，个人简介文本就会出现。

如果单击图像，我应该怎么做才能显示个人简介文本？

如果显示了传记文本并且用户单击了不同的图像，我怎样才能使之前的传记文本消失？我不希望它滑入和滑出，而只是淡入和淡出。

这是我的 jquery:

$('.bio-button').click(function () {
   $(this).siblings('.team-text').toggle();
});

$('.team-text .close').click(function () {
   $(this).parent('.team-text').hide();
});


$('.team-member img, .team-member-minor img').click(function() {
if ( !$(this).next('div').is(':visible') ) {
    $(".team-text").slideUp();
    $(this).next('div').slideToggle();
}
});

$('.close').click(function() {
    $(this).parent().slideUp();
});

这是我的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>
</div><!-- #team-member -->

这里是一个链接 DEMO .

Answer 1

我不完全确定你试图用布局完成什么，但我认为就 jQuery 而言，这可能会完成你正在寻找的东西。

$('.team-photo, .bio-button').on('click', function(){
    $('.team-text').fadeOut();
    $(this).prevAll('.team-text:hidden').fadeIn();
});

http://jsfiddle.net/kYJBM/

因为 '.team-text' 元素的默认状态是隐藏的，我们只是在每次点击时隐藏它们，然后在 fadeIn() 上使用 ':hidden' 过滤器来防止它在已经可见的元素中淡出(这样我们就可以在用户单击两次时隐藏磁贴)。我认为令人困惑的是有两个函数，第二个函数有条件地运行。这是一种更简短的表达方式:

if ($(this).prevAll('.team-text').css('display') === 'none') {
    $(this).prevAll('.team-text').fadeIn();
}

(为便于阅读而编辑)