jQuery hide show element logic

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 трахнуться img 1.

Чтобы сбросить непрозрачность закрытия текстовой части, просто removeAttr('style'); по щелчку .close:

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

Я думаю, что это то, что вы хотите. Я также обновил ваш jsFiddle.

Answer 2

Примените класс css (например, active) к разделу «.team-member» в вашем «активном» состоянии, поэтому вам не нужно вручную устанавливать непрозрачность для каждого элемента. Это также делает вещи более чистыми и удобными для будущего.

EDIT: Я изменил имена классов в соответствии с предложением Александра ниже. 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'); 
});