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'); 
});