Question

我有一个图像列表，我希望在点击它们时，它们旁边会显示文字。我在默认状态下将图像的不透明度设置为0.5，当用户将鼠标悬停在图像上时，不透明度将变为full或1。

现在，只要文本框打开，我希望图像的不透明度为1。

获得更好的主意

我已经尝试过这个用于我的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，这样您就不必手动设置每个项目的不透明度。这也使得事物更清洁，更易于维护。

编辑：我根据@ 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');
});

Answer 2

您可以将以下内容添加到.on('click')的{{1}}部分：

.team-photo,.bio-button

这将删除现有图像上的任何样式标记（通过更改其不透明度添加），然后将单击的$('img').removeAttr('style'); $(this).find('img').css({opacity:1});的不透明度设置为1。

要在关闭文字部分时重置不透明度，点击img时只需removeAttr('style');：

.close

我认为这就是你想要的。我还更新了你的jsFiddle。

jQuery隐藏显示元素逻辑

2 个答案: