Почему скрипт срабатывает только на одной картинке?

Question

[Slow132432]

При наведении на фото срабатывает скрипт - одна надпись исчезает другая появляется. Это работает только yg одной картинке, хотя их 4
.

let wrapContent = document.querySelector('.ApproachImg'); 
let wrapContentH1 = document.querySelector('.wrapContentH3'); 
let wrapContentP = document.querySelector('.imgContent'); 
wrapContent.onmouseenter = function() {
	wrapContentH1.classList.toggle('wrapContentH3None');
	wrapContentP.classList.toggle('wrapContentPBlock');
}

wrapContent.onmouseleave = function() {
	wrapContentH1.classList.toggle('wrapContentH3None');
	wrapContentP.classList.toggle('wrapContentPBlock');

}

<div class="wrappApproach">
					<div class="ApproachImg">
						<div class="imgWrpper">
							<img src="img/jpg/sleepChild.jpg" alt="">
						</div>
						<div class="wrapContent">
							<h3 class="wrapContentH3">От 0 до 6 мес</h3>
							<div class="imgContent">
								<p class="wrapContentP">Товары для самых маленьких от 0 до 6 месяцев</p>
							</div>
						</div>
						<div class="ApproachContent">
							<h3>Коллекция Cam</h3>
						</div>
					</div>
					<div class="ApproachImg">
						<div class="imgWrpper">
							<img src="img/jpg/childLezet.jpg" alt="">
						</div>
						<div class="wrapContent">
							<h3 class="wrapContentH3">От 0 до 6 мес</h3>
							<div class="imgContent">
								<p class="wrapContentP">Товары для самых маленьких от 0 до 6 месяцев</p>
							</div>
						</div>
						<div class="ApproachContent">
							<h3>Коллекция Deluxe Solo Per Te</h3>
						</div>
					</div>
					<div class="ApproachImg">
						<div class="imgWrpper">
							<img src="img/jpg/childPolzet.jpg" alt="">
						</div>
						<div class="wrapContent">
							<h3 class="wrapContentH3">От 0 до 6 мес</h3>
							<div class="imgContent">
								<p class="wrapContentP">Товары для самых маленьких от 0 до 6 месяцев</p>
							</div>
						</div>
						<div class="ApproachContent">
							<h3>Коллекция Deluxe Solo Per Te</h3>
						</div>
					</div>
					<div class="ApproachImg">
						<div class="imgWrpper">
							<img src="img/jpg/childWindow.jpg" alt="">
						</div>
						<div class="wrapContent">
							<h3 class="wrapContentH3">От 0 до 6 мес</h3>
							<div class="imgContent">
								<p class="wrapContentP">Товары для самых маленьких от 0 до 6 месяцев</p>
							</div>
						</div>
						<div class="ApproachContent">
							<h3>Коллекция </h3>
						</div>
					</div>
				</div>

Подскажите, пожалуйста, что не так?

Answer 1

[ThunderCat]

Подскажите, пожалуйста, что не так?

У вас все работает правильно, только то что вы себе выдумали не соответствует тому как оно на самом деле работает. Похоже вы пытаетесь работать как в jquery, но в ванильном жс это работает по другому.

Как работает сейчас (плохо): Вы выбираете 1(!) элемент с классом ApproachImg (читаем доку querySelector) и на него вешаете событие, ну и по событию тоже работаете с выбранными одиночными элементами. Естественно будет лажа.

Как надо: Выбрать все элементы с классом ApproachImg (читаем доку querySelectorAll), проходимся форичем по всем выбранным элементам, вешаем слушатель события и в обработчике события используем querySelector() от текущего элемента вместо querySelector на весь документ, что избавляет нас от необходимости как-то привязывать внутренние элементы к наружным.

Answer 2

[Palpebral]

let wrapContent = document.querySelector('.wrappApproach');

скорее всего Вы это имели ввиду)

Comments

[ThunderCat]

Предположения и уточнения по вопросу пишите в комментариях к вопросу, а не в ответах.