jQuery隐藏并显示多个元素

我有多个包含照片和文本的div。当用户点击“生物”按钮时，传记文本出现。jQuery隐藏并显示多个元素

如果图像被点击，我将如何获得生物文本？

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

，这是我的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的链接。

来源

2013-03-08 MGDTech

我不完全确定你想要完成的布局，但我认为这可能会完成你所期待的jQuery的。

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

http://jsfiddle.net/kYJBM/

因为“.team文本”元素的默认状态是隐藏的，我们只是藏在他们每次点击，然后使用：在淡入过滤器（），以保持‘隐藏’它从一个已经可见的元素中淡出（这是因为如果用户点击它两次，我们可以隐藏一个区块）。我认为令人困惑的是有两个功能，第二个有条件运行。这是表达这种较短方式：

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

（编辑以可读性）

来源

2013-03-08 16:59:27

马尔科姆，是的，这就是我要找的！如果你有时间，你介意给我解释一下这段代码吗？特别是最后一个功能？这种逻辑似乎与我的微弱思想相反。 – MGDTech 2013-03-08 17:11:13

我更新了它，使它更有意义。希望。：P – 2013-03-08 18:07:15

如果你在任何地方想在瓷砖的工作：

$('div.team-photo').click(function(){ 
    $(this).parent().find('.team-text').is(':visible').hide(); 
    $(this).siblings('.team-text').toggle(); 
});

如果你只是想在另外的图片：

$('div.team-photo > img').click(function(){ 
    $(this).parent().parent().find('.team-text').is(':visible').hide(); 
    $(this).parent().siblings('.team-text').toggle(); 
});

这两个会隐藏显示之前的所有其他可见.team-text元素的自己，以及隐藏关联的.team-text元素，如果用户再次点击该事件。

来源

2013-03-08 16:28:30

感谢约什。但这似乎并不奏效。 – MGDTech 2013-03-08 16:53:39

jQuery隐藏并显示多个元素

回答

相关问题