Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   е обрабатывается клик через querySelectorAll (https://javascript.ru/forum/events/83590-e-obrabatyvaetsya-klik-cherez-queryselectorall.html)

Vitalii_M 18.01.2022 14:35

е обрабатывается клик через querySelectorAll
 
Всем драссе.. заранее буду благодарен...
Меню аккордеон.. при клике на блок, открывается и закрывается..
Внутри блока галерея.. при клике на любую картинку, блок не должен закрываться..
Я добавил If при клике, и он срабатывает только при querySelector (возвращает первый который нашел)
но при querySelectorAll он не срабатывает..
Смотрел логи.. по логам не все ок (при клике на первую картинку через querySelector возвращает тру это норма, а вот через querySelectorAll на все картинки выдает фолс.. Все элементы все есть, все чекается.. Проблема лишь в обработке через querySelectorAll )
(function showProjects() {
  /* PUSH HTML BLOCK */
  for (let i = 0; i < projectsArr.length; i++) {
    let element = `<div class="project__item">
      <div class="project__main">
        <img src=${projectsArr[i].img} class="project__img" alt="project__img"/>
          <div class="project__info">
            <h2 class="project__title">${projectsArr[i].name}</h2>
            <p class="project__subtitle"></p>${projectsArr[i].text}></p>
          </div>
      </div>
       <div class="project__description">
        <h2 class="project__desc--title">Характеристики</h2>
        <p class="project__desc--text">${projectsArr[i].info}</p>
        <div class="images__gallery" id="projects-gallary">
        </div>
       </div>
       <div class="arrow__down">
        <i class="uil uil-angle-down dropdown__icon"></i>
       </div>
      </div>`
    document.getElementById('projects').innerHTML += element
  }
})()
;(function pushImg() {
  for (let item of projectsArr) {
    if (item.hasOwnProperty('images')) {
      let srcArr = Object.values(item.images)
      for (let el of srcArr) {
        let domImg = `
          <a href="${el}" class="images__gallery--link" data-gallery="gallery1">
            <img
              src="${el}"
              class="images__gallery--item"
              alt="project__img"
            />
          </a>
       `
        document.getElementById('projects-gallary').innerHTML += domImg
        lightGallery(document.getElementById('projects-gallary'), {
          thumbnail: true,
        })
      }
    } else {
      const empty = `
        <div class="message">
          <h1 class="empty__img">Нет изображений</h1>
        </div>
      `
      document.getElementById('projects-gallary').innerHTML += empty
    }
  }
})()
/* ACCORDION PROJECTS */
const acc = document.querySelectorAll('.project__item')
const gallery = document.querySelectorAll('.images__gallery--item')
for (item of acc) {
  console.log(gallery)
  item.addEventListener('click', function (e) {
    console.log(e.target == gallery)
    if (e.target !== gallery) {
      if (this.classList.contains('active')) {
        this.classList.remove('active')
      } else {
        acc.forEach((el) => el.classList.remove('active'))
        this.classList.add('active')
      }
    } else {
      this.classList.add('active')
    }
  })
}

рони 18.01.2022 15:06

Vitalii_M,
if (e.target !== gallery)
if(!e.target.closest('.images__gallery--item'))

Vitalii_M 18.01.2022 15:34

Обнял, приподнял.. Был бы рядом еще бы поцеловал.. Безумно благодарен:dance:


Часовой пояс GMT +3, время: 20:59.