Показать сообщение отдельно
  #1 (permalink)  
Старый 18.01.2022, 14:35
Новичок на форуме
Отправить личное сообщение для Vitalii_M Посмотреть профиль Найти все сообщения от Vitalii_M
 
Регистрация: 18.01.2022
Сообщений: 2

е обрабатывается клик через 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')
    }
  })
}
Ответить с цитированием