Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2019, 11:44
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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

<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>


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

Последний раз редактировалось madeas, 14.10.2019 в 12:06.
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2019, 11:57
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

проверка не в обработчике клика, с таким же успехом строки 48 и 50 можно на тоггл поменять ) и вызывать в 40 строке...
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2019, 12:02
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

тут немного сложнее, обновил код.
При клике на один из блоков project-image, ему добавляется класс fullImage.
И при условии, что у одного из них имеется класс fullImage, нужно добавлять hidden к обертке.
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2019, 12:43
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
добавить класс через наличие другого класса у элемента nikoshot jQuery 2 27.04.2017 08:17
Проверка на наличие класса dema8912 jQuery 3 14.05.2015 14:17
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Проверка на наличие класса до или после элемента. doniv jQuery 2 23.08.2011 23:03
Свойства/методы класса TicTac Общие вопросы Javascript 5 03.07.2011 14:53