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隱藏並顯示多個元素

回答

相關問題