jQuery隱藏顯示元素邏輯

Question

我有一個圖像列表，當他們被點擊時，我想讓文本顯示在他們旁邊。我已將圖像的不透明度設置爲默認狀態下的0.5，並且當用戶將鼠標懸停在圖像上時，不透明度將變爲全屏或1.

現在我希望圖像的不透明度爲1，只要文本框已打開。

您可以通過viewing this fiddle link.

得到一個更好的主意，我曾嘗試爲我的JavaScript，但它不工作：

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


$('.team-member .team-photo, .team-member .bio-button, .team-member-minor .team-photo, .team-member-minor .bio-button').on('click', function(){ 
    $(this).find('.team-text:visible').hide(); 
    $(this).find('.team-member img, .team-member-minor img').css('opacity','0.5'); 
}); 

$('.team-photo, .bio-button').on('click', function() { 
    $('.team-text').hide(); 
    $(this).prevAll('.team-text:hidden').show(); 
    $(this).prevAll('.team-member img, .team-member-minor img').css('opacity','1'); 
}); 

Answer 1

您可以添加以下到.on('click')件爲.team-photo,.bio-button：

$('img').removeAttr('style'); 
$(this).find('img').css({opacity:1}); 

這將刪除現有圖像上的任何樣式標記（通過更改其不透明度添加），然後設置cli的不透明度cked img爲1

要重置關閉文本部分，只是removeAttr('style');上的.close點擊不透明度：

$('img').removeAttr('style'); 

我想這是你想要的。我也更新了你的jsFiddle。

Answer 2

將css類（例如active）應用到您的「活動」狀態下的.team-member div，這樣您就不必手動設置每個項目的不透明度。這也使得事情變得更清潔，更容易維護。

編輯： 我改變了@亞歷山大的建議下面的類名稱。 http://jsfiddle.net/Lh6xU/這是他fiddle

CSS

.team-member-minor img { 
opacity:.5; /* the default state for images; no need for jQuery */ 
} 
.team-text { 
display:none; 
} 
/* "active" class */ 
.team-member-minor.active img { 
opacity:1; 
} 

.active .team-text { 
display:inline; 
} 

JS

$('.team-member-minor').on('click', function(){ 
    $(this) 
     .addClass('active') 
     .siblings('.team-member-minor') 
     .removeClass('active'); 
} 

// if a user "closes" the textbox, reset our team member 

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