@Alex_vs_Predator

Почему не работает скпирт с метод .hide() и .show()?

Доброе время суток!
Не могу понять, почему у меня не работает скрипт с использованием метода .hide() and .show()???
Мне надо чтобы при нажатии на картинку, над ней менялся текст, но это не происходит....
Просто при нажатии, у всех картинок свой текст принимает display: none;
Почему так?
Благодарю за ранее, того кто откликнется!!!

<div class="testimonials">
		<div class="home_inner">
			<h4>Testimonials</h4>
			<div class="hide_block">
				<div class="professions_name_wrap_1">
					<p class="testimonias_text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
						at lacus commodo suscipit praesent sollicitudin enim vel mirhon”</p>
					<p class="professions_name"><span>Jon Doe</span> / CEO of LoremIpsum</p>
				</div>
				<div class="professions_name_wrap_2">
					<p class="testimonias_text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
						at lacus commodo suscipit praesent sollicitudin enim vel mirhon222”</p>
					<p class="professions_name"><span>Jon Doe</span> / Web of LoremIpsum</p>
				</div>
				<div class="professions_name_wrap_3">
					<p class="testimonias_text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
						at lacus commodo suscipit praesent sollicitudin enim vel mirhon333”</p>
					<p class="professions_name"><span>Jon Doe</span> / Designer of LoremIpsum</p>
				</div>
			</div>
			<div class="people_foto">
				<ol>
					<li>
						<a href="#" class="people_foto_wrap_1">
							<img src="template/images/portfolio/women.png" alt="">
						</a>
					</li>
					<li>
						<a href="#" class="people_foto_wrap_2">
							<img src="template/images/portfolio/man.png" alt="">
						</a>
					</li>
					<li>
						<a href="#" class="people_foto_wrap_3">
							<img src="template/images/portfolio/women.png" alt="">
						</a>
					</li>
				</ol>
			</div>
		</div>


<script src="//code.jquery.com/jquery.min.js"></script>
<script>
	$(document).ready(function () {
		$(".people_foto_wrap_1").click(function (e) {
			e.preventDefault();
			$(this).find('professions_name_wrap_2, professions_name_wrap_3').hide();
			$(this).find('.professions_name_wrap_1').show;
		});
		$('.people_foto_wrap_2').click(function (e) {
			e.preventDefault();
			$('.professions_name_wrap_1, .professions_name_wrap_3').hide();
			$('.professions_name_wrap_2').show;
		});
		$('.people_foto_wrap_3').click(function (e) {
			e.preventDefault();
			$('.professions_name_wrap_2, .professions_name_wrap_1').hide();
			$('.professions_name_wrap_3').show;
		});
	});
</script>
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 2
dimovich85
@dimovich85
HTML, CSS, JS, VUE, PHP
Потому что метод find ищет внутри "this-элемента", назовем его так.
Надо сделать, например, следующим образом:
$(this).parents('.testimonials')
           .find('.professions_name_wrap_2, professions_name_wrap_3')
           .hide();
/*
Берем виновника события, находим родителя, потом в нем ищем нужные нам элементы и скрываем/отображаем их.
*/


Полезная шпаргалка по jQ.

Вообще, если писать в таком стиле, то код не расширяем, если их станет много, то будет не легко. Вы на каждое фото вручную вешаете обработчик, вручную указываете какие блоки показать, какие скрыть. Надо подумать, как сделать, чтоб упростить это все.
Ответ написан
@Alex_vs_Predator Автор вопроса
5a834ade99da0326776029.png
вот как должно выглядеть...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы