Наличие класса?
Есть такой пример:
<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> При проверке наличия класса что-то не срабатывает. Подскажите, что упускаю? С утра тупильник... |
проверка не в обработчике клика, с таким же успехом строки 48 и 50 можно на тоггл поменять ) и вызывать в 40 строке...
|
тут немного сложнее, обновил код.
При клике на один из блоков project-image, ему добавляется класс fullImage. И при условии, что у одного из них имеется класс fullImage, нужно добавлять hidden к обертке. |
нелогичная задача, если ты обертке поставишь hidden, зачем ) тогда fullImage делать, ее не видно будет...
по коду: неправильно используется forEach, e должно быть в качестве аргумента в функции обратного вызова в обработчике click'а, потом e.target... и все остальное |
Часовой пояс GMT +3, время: 07:28. |