Как сделать чтобы скрипт срабатывал для множества элементов?

Рейтинг: 2Ответов: 1Опубликовано: 11.01.2023

Как изменить данный скрипт чтобы он срабатывал для множества элементов с одинаковыми классами (для блога), он работает только для первого элемента, при наведении курсора на последующие элементы ничего не происходит.

let [frontBlock, backBlock] = [
  document.querySelector('.frontBlock'), document.querySelector('.backBlock'), 0
]
frontBlock.addEventListener('mouseover', (e) => {
  if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div') && e) {
    e.target.closest('div').style.display = 'none';
    backBlock.style.display = 'block';
  }
})

backBlock.addEventListener('mouseout', (e) => {
  if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div')) {
    e.target.closest('div').style.display = 'none';
    frontBlock.style.display = 'block';
  }
})

Т.е. вот такой код блога, для первого контейнера этот скрипт работает, при наведении мышки на второй и последующие контейнеры ничего не происходит

<div class="container">
  <div class="frontBlock">
    <img src="1.jpg">
  </div>
  <div class="backBlock">
    <img src="2.jpg">
  </div>
</div>

<div class="container">
  <div class="frontBlock">
    <img src="3.jpg">
  </div>
  <div class="backBlock">
    <img src="4.jpg">
  </div>
</div>

Один блок находится над другим.

.container{
    position: relative;
}
.frontBlock{           
    position: absolute;
}
.backBlock{
    z-index: 9;       
}
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Можно что-то такое сделать.. document.querySelectorAll('.frontBlock') возвращает коллекцию т.е. [<div class="frontBlock">frontBlock</div>, <div class="frontBlock">frontBlock</div>].

А document.querySelector('.frontBlock') вернёт первый попавшийся <div class="frontBlock">frontBlock</div>..

const frontBlock = document.querySelectorAll('.frontBlock');

frontBlock.forEach(element => { //цикл по коллекции, берем оди элемент
  element.addEventListener('mouseover', (e) => { //Вешаем слушатель
    e.target.closest(".container").querySelector('.frontBlock').style.display = 'none'; //Скрываем элемент на котором висит этот слушатель
  });
  element.addEventListener('mouseout', (e) => {
    e.target.closest(".container").querySelector('.frontBlock').style.display = 'block'; //Показываем элемент на котором висит этот слушатель
  })
});
.container {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  position: relative;
  background: gray;
}

img {
  position: relative;
  height: 100%;
}

.frontBlock {
  position: absolute;
  width: 100%;
  height: 50%;
  background: green;
  z-index: 2;
  text-align: center;
}

.backBlock {
  position: absolute;
  width: 100%;
  height: 50%;
  background: blue;
  z-index: 1;
  text-align: center;
}
<div class="container">
  <div class="frontBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_argentina.jpg"></div>
  <div class="backBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_algir.jpg"></div>
</div>

<div class="container">
  <div class="frontBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_argentina.jpg"></div>
  <div class="backBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_algir.jpg"></div>
</div>

Вариант без js

.container {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  position: relative;
  background: gray;
}

img {
  position: relative;
  height: 100%;
}

.frontBlock {
  position: absolute;
  width: 100%;
  height: 50%;
  background: green;
  z-index: 2;
  text-align: center;
}
.frontBlock:hover {
  display: none; 
}
.backBlock {
  position: absolute;
  width: 100%;
  height: 50%;
  background: blue;
  z-index: 1;
  text-align: center;
}
<div class="container">
  <div class="frontBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_argentina.jpg"></div>
  <div class="backBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_algir.jpg"></div>
</div>

<div class="container">
  <div class="frontBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_argentina.jpg"></div>
  <div class="backBlock"><img src="https://www.dorogavrim.ru/img/flagi/flag_algir.jpg"></div>
</div>