jQuery隐藏显示元素逻辑

我有一个图像列表，我希望在单击这些图像时，在它们旁边显示文本。在默认状态下，我将图像的不透明度设置为0.5，当用户将鼠标悬停在图像上时，不透明度变为完全或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');
});

---

您可以将以下内容添加到

.on（'click'）

的

.team photo.bio按钮中：

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

这将删除现有图像上的任何样式标记（通过更改其不透明度添加），然后将单击的
img
的不透明度设置为1

要在关闭文本部分时重置不透明度，只需
removeAttr（'style'）。关闭
：

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

我想这就是你想要的。我还更新了你的JSFIDLE。
你可以在
.on（'click'）
的
.team photo.bio按钮中添加以下内容：

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

这将删除现有图像上的任何样式标记（通过更改其不透明度添加），然后将单击的
img
的不透明度设置为1

要在关闭文本部分时重置不透明度，只需
removeAttr（'style'）。关闭
：

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

我想这就是你想要的。我还更新了您的JSFIDLE。
在您的“活动”状态下，将css类（例如，
活动
）应用于
.team member
div，这样您就不必手动设置每个项目的不透明度。这也使得将来的事情更干净、更易于维护

编辑：
我已经根据下面@Alexander的建议更改了类名。这是他的

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

在“活动”状态下，将css类（例如，
active
）应用于
.team member
div，这样您就不必手动设置每个项目的不透明度。这也使得将来的事情更干净、更易于维护

编辑：
我已经根据下面@Alexander的建议更改了类名。这是他的

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

哪个文本框？我在JSFIDLE中没有看到文本框。当您单击图像时，文本框会出现。您应该尝试另一种方式。。。直接在CSS文件上使用：opacity:0.5，并创建两个类别。CLAS用于非活动状态和活动状态。在那里，当Bio处于活动状态时，可以使用addClass。希望我能帮上忙！文本框实际上不是文本框，它只是一个标签。这是一个文本框：。抱歉，我太挑剔了，但您使用的文本框术语最初让我感到困惑。
.team member
应该是什么？此选择器不匹配哪个文本框的元素？我在JSFIDLE中没有看到文本框。当您单击图像时，文本框会出现。您应该尝试另一种方式。。。直接在CSS文件上使用：opacity:0.5，并创建两个类别。CLAS用于非活动状态和活动状态。在那里，当Bio处于活动状态时，可以使用addClass。希望我能帮上忙！文本框实际上不是文本框，它只是一个标签。这是一个文本框：。抱歉，我太挑剔了，但您使用的文本框术语最初让我感到困惑。
.team member
应该是什么？这个选择器不匹配任何元素，这正是我要寻找的。我不知道你可以用jquery删除一个属性！我以为你可以改变css。删除该属性更有意义。我应该发布更新后的代码，还是仅仅让它在JSFIDLE上有帮助？哦，我想你很好，JSFIDLE提供了一个很好的参考。我不同意。我认为这个答案并不能解决代码中的所有问题。例如，您的
单击
事件处理程序是多余的，并且您没有很好地使用CSS类名。对于这样一个简单的任务，你最终得到了一个过于复杂的代码。那么，有什么更简单的方法呢？@MGDTech，先看看Nick的答案。尽管这并不完全正确，但它是灰色的，这正是我想要的。我不知道你可以用jquery删除一个属性！我以为你可以改变css。删除该属性更有意义。我应该发布更新后的代码，还是仅仅让它在JSFIDLE上有帮助？哦，我想你很好，JSFIDLE提供了一个很好的参考。我不同意。我认为这个答案并不能解决代码中的所有问题。例如，您的
单击
事件处理程序是多余的，并且您没有很好地使用CSS类名。对于这样一个简单的任务，你最终得到了一个过于复杂的代码。那么，有什么更简单的方法呢？@MGDTech，先看看Nick的答案。尽管这并不完全正确，但它被驱动到了那里。这似乎更有道理。如果你注意到在我的css中，我确实为图像设置了不透明度。但是，我似乎无法让您的javascript按计划工作。这是因为没有
.team member
，而是
.team member minor
。而
.close
应该从
.team member minor
中删除
活动的
类名。支票：）谢谢你的小提琴亚历山大。我将在我的答案中引用它，并将其反映在那里的类名中。谢谢尼克。这似乎更有道理。如果你注意到在我的css中，我确实为图像设置了不透明度。但是，我似乎无法让您的javascript按计划工作。这是因为没有
.team member
，而是
.team member minor
。而
.close
应该从
.team member minor
中删除
活动的
类名。支票：）谢谢你的小提琴亚历山大。我将在我的答案中引用它，并将其反映在那里的类名中。