Наличие класса?
Есть такой пример:
<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, время: 20:00. |