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

将 css 类(例如 active)应用于“事件”状态下的 .team-member div，这样您就不必手动设置每个元素的不透明度。这也使 future 的事情变得更清洁和更易于维护。

编辑:我已经根据下面@Alexander 的建议更改了类名。 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');
});