Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Наличие класса? (https://javascript.ru/forum/dom-window/78647-nalichie-klassa.html)

madeas 14.10.2019 11:44

Наличие класса?
 
Есть такой пример:

<style>
  #wrapper {
    width: 310px;
    height: 150px;
    background-color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #wrapper.hidden {
    background-color: black;
  }

  .project-image {
    width: 100px;
    height: 100px;
    background-color: #eee;
  }

  .fullImage {
    background-color: red;
  }

</style>


<div id="wrapper">
  <div class="project-image"></div>
  <div class="project-image"></div>
  <div class="project-image"></div>
</div>

<script>
  const prjcts = document.querySelectorAll('.project-image'),
    cases = document.querySelector('#wrapper');

  //- добавляем класс по клику

  prjcts.forEach(function(e) {
    cases.addEventListener('click', () => {
      e.classList.toggle('fullImage');

      console.log(prjcts)
      console.log(cases)

      //- проверяем наличие класса

      if (e.classList.contains('fullImage')) {
        cases.classList.add('hidden');
      } else {
        cases.classList.remove('hidden');
      }
    });
  });

</script>


При проверке наличия класса что-то не срабатывает. Подскажите, что упускаю? С утра тупильник...

SuperZen 14.10.2019 11:57

проверка не в обработчике клика, с таким же успехом строки 48 и 50 можно на тоггл поменять ) и вызывать в 40 строке...

madeas 14.10.2019 12:02

тут немного сложнее, обновил код.
При клике на один из блоков project-image, ему добавляется класс fullImage.
И при условии, что у одного из них имеется класс fullImage, нужно добавлять hidden к обертке.

SuperZen 14.10.2019 12:43

нелогичная задача, если ты обертке поставишь hidden, зачем ) тогда fullImage делать, ее не видно будет...

по коду: неправильно используется forEach, e должно быть в качестве аргумента в функции обратного вызова в обработчике click'а, потом e.target... и все остальное


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